是否可以在 vue 中对 json 文件中的非数组对象使用 v-for？答案

【问题标题】：is it possible to use a v-for in vue for non-array objects from a json file?是否可以在 vue 中对 json 文件中的非数组对象使用 v-for？
【发布时间】：2020-07-31 16:52:59
【问题描述】：

我正在尝试将一些值从 json 文件传递给组件，但是我不断收到“产品未定义”

product.json

{
    "product": {
        "price": 1.11,
        "amount": 0.11
    }
}

vue js 中的组件：

<div v-for="prod in product" :key="price">

我怎样才能摆脱这个错误？

【问题讨论】：

要使用v-for，你应该使用数组。所以产品本身应该是一个数组。

标签： node.js json vue.js

【解决方案1】：

如果您在 Vue 实例的数据中定义了 product，您可以在 v-for 中使用它。

我在下面的小提琴中包含了一个工作版本。

let productJson = {
    "product": {
        "price": 1.11,
        "amount": 0.11
    }
};

new Vue({
  el: "#app",
  data: () => {
    return productJson;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(value, key) in product">{{key}}: {{value}}</div>
</div>

【讨论】：

【解决方案2】：

我猜你需要遍历对象的键。

您可以为此使用Object.keys。

<div v-for="prodKey in Objects.keys(products)" :key="products[prodKey].price">

【讨论】：