Vue.js：我可以使用 v-if 創建組件嗎？

Question

我是前端開發的新手，正在嘗試學習 Vue.js。 假設我有一個數組

fruits = ["New York", "Chicago", "London"]

我有一個名為 FruitPrices 的組件，它可以像這樣工作：

<FruitPrices fruit="London"></FruitPrices>

我想知道是否可以使用 v-if 創建多個組件？ 類似於以下內容：

<div v-for="item in fruits" : key="item">
    <FruitPrices fruit="item"></FruitPrices>
</div>

這段代碼不起作用，所以我想知道是否有任何有 Vue 經驗的人可以幫我一把！

Answer 1

在 Vue Js 中進行循環時，需要有一個鍵。 例如，如果你有fruits = [{id:1, name: London}, {id:2, name: New York}]你可以做v-for="item in fruits":key="item.id"但是因為你沒有它，所以最好的選擇是下面的一個：

<div v-for="(item, index) in fruits"  :key="index">
    <FruitPrices fruit="item"></FruitPrices>
</div>

Vue js 會將索引視為數組中每個項目的 position

Answer 2

<FruitPrices fruit:"item" v-for="(item,index) in fruits" :key="index">
</FruitPrices>

您可以在組件標簽中使用 v-for

Answer 3

這是您的組件：

<template>
  <div>
    <div v-for="item in fruits" :key="item">
      <FruitPrices :fruit="item"></FruitPrices>
    </div>
  </div>
</template>
<script>
import FruitPrices from "../somePlace/FruitPrices";
export default {
  components: { FruitPrices },
  data: () => ({ fruits: ["New York", "Chicago", "London"] })
}
</script>

在這一行<FruitPrices fruit="item"></FruitPrices>你必須使用:在fruit prop之前，因為你不是傳遞一個字符串，而是一種變量，

<FruitPrices:fruit="item"></FruitPrices>

你已經准備好展示每個城市的水果價格了！

順便說一句，與您有關 v-if 的問題有關，將 v-if 與 v-for 一起使用並不是一種好的過濾方法，最好的方法是使用計算屬性。