Как передать данные в компонент с помощью Props в Vue2? - PullRequest
Новая
       59

Как передать данные в компонент с помощью Props в Vue2?

0 голосов
/ 17 июня 2020

Я создал файл. Vue для размещения информации о кафе (страница сведений о кафе). Однако я хотел бы взять часть этой страницы сведений и сделать ее отдельным компонентом, чтобы более эффективно управлять любыми обновлениями шаблонов.

Поэтому я создал компонент (CafeHeader. vue) внутри папки компонентов. Я пытаюсь передать данные из моего массива (который используется на моей странице сведений о кафе) этому компоненту с помощью Props. Однако я не могу заставить его работать.

Шаблон для моей страницы сведений о кафе выглядит следующим образом: 

<template>
    <div>
        <div v-for="cafe in activeCafe">
            <CafeHeader v-bind:cafes="cafes" />
            <div class="content">
                <p>{{ cafe.cafeDescription }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import CafeHeader from "./../../components/CafeHeader";
import cafes from "./../../data/cafes"; // THIS IS THE ARRAY
export default {
    data() {
        return {
            cafes: cafes
        };
    },
    components: {
        CafeHeader,
    },
    computed: {
        activeCafe: function() {
            var activeCards = [];
            var cafeTitle = 'Apollo Cafe';
            this.cafes.forEach(function(cafe) {
                if(cafe.cafeName == cafeTitle){
                    activeCards.push(cafe);
                }
            });
            return activeCards;
        }
    }
};
</script>

Затем в компонентах папка у меня есть компонент под названием CafeHeader , где я хочу использовать данные из массива, который ранее был импортирован на страницу сведений о кафе; 

<template>
    <div>
        <div v-for="cafe in cafes">
            <h1>Visit: {{cafe.cafeName}} </h1>
        </div>
    </div>
</template>

<script>
        export default {
  name: "test",
  props: {
      cafes: {
          type: Array,
          required: true
      }
  },
  data() {
      return {
          isActive: false,
          active: false
      };
  },
  methods: {}
};
</script>

Если в компоненте CafeHeader у меня есть cafe in cafes, он отображает данные из кафе. js Однако это все кафе в списке, и мне нужно только одно кафе. 

<template>
    <div>
        <div v-for="cafe in cafes">
            <h1>Visit: {{cafe.cafeName}} </h1>
        </div>
    </div>
</template>

1 Ответ

0 голосов
/ 17 июня 2020

Компонент также необходим activeCafes на v-for

<template>
    <div>
        <div v-for="cafe in activeCafes">
            <h1>Visit: {{cafe.cafeName}} </h1>
        </div>
    </div>
</template>
...