Nuxt JS & Bootstrap Vue - Лучший способ изменить изображение с компонента карты - PullRequest
Новая
       60

Nuxt JS & Bootstrap Vue - Лучший способ изменить изображение с компонента карты

0 голосов
/ 28 апреля 2020

Требуемый результат: создать компонент карты, который я могу использовать на нескольких разных страницах. Я хочу определить непосредственно на каждой странице верхнее изображение, которое я хочу использовать в компоненте.

Компонент карты : 

    <template>
  <div>
    <b-card img-alt="Card image" img-top>
      <b-card-img :src="imageUrl" alt="Image" bottom></b-card-img>
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the
        card's content.
      </b-card-text>
    </b-card>
  </div>
</template>
<script>
export default {
  props: {
    imageUrl: String,
    required: true
  }
};
</script>

Индекс page : 

<template>
  <div>
    <Card ></Card>
     </div>
      <
</template>

<script>

import Card from "~/components/Card.vue";


export default {
  components: {
    Card

  },
  data: function() {
    return {
      imageUrl: require("../assets/imgs/logo.png")
    };
  },

};
</script>

<style scoped>

}
</style>

Можете ли вы сказать мне, что не так? Если я создаю страницу о нас с повторным использованием компонента карты, я хотел бы изменить пропозицию imageUrl.

1 Ответ

0 голосов
/ 29 апреля 2020

У вас есть imageUrl опора в вашем Card компоненте, но вы не используете его на своей index странице. Вы должны быть в состоянии сделать <Card :image-url="imageUrl"> на своей странице индекса.

Одна вещь, которая, однако, является неправильной, это то, как вы определяете свою опору в своем компоненте.

Измените это на: 

props: {
  imageUrl: {
    type: String,
    required: true
  }
}


Vue.component('card', {
  el: '#card-template',
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  }
})


new Vue({
  el: '#app',
  data() {
    return {
      imageUrl: 'https://via.placeholder.com/1920x720'
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <card :image-url="imageUrl"></card>
</div>

<template id="card-template">
  <b-card img-alt="Card image" img-top>
    <b-card-img :src="imageUrl" alt="Image" bottom></b-card-img>
    <b-card-text>
      Some quick example text to build on the card and make up the bulk of the
      card's content.
    </b-card-text>
  </b-card>
</template>
...