Javascript 在VueJs2中将JSON对象解析为数组，然后渲染数组以选择选项

我有一个product.JSON存储在本地同一文件夹中，我想将其中的每个对象也推送到一个vue数组中。 然后，我的目标是将每个对象的属性渲染为单独的选择选项

我正在使用FetchAPI将json数据拉入并存储到我的数组中，但我不知道如何做，也不知道我的方法哪里出了问题

我是编程新手，自学成才。所以请给我一些建议

我的json数据

 [
        {
            "product":"ForceField",
            "type":"Hinge Door",
            "attribute":"Triple Lock",
            "height":"2300",
            "width":"1200",
            "price":"100"
        },
        {
            "product":"Protec",
            "type":"Sliding Door",
            "attribute":"Single Lock",
            "height":"2100",
            "width":"1600",
            "price":"3000"
        }
]

Vue数组和获取api函数

// Array for all products from JSON
var all_products = new Vue({
    el: '#all_products',
    data:{
      all_products: []
    },
    // Fetchs product data and throws it in a vue array
    mounted: function() {
      fetch("/Data/products.json")
        .then(res => res.json())
        .then(res => { 
          this.all_products = res.data
          console.log(res)
          console.log(all_products)
          })     
        }
      })

显示响应正确但我的所有产品数组不正确的页面控制台： 我真的不确定我的问题是源于我的阵列配置还是我试图解析数据的方式

（编辑：我变了

console.log(all_products)
to 
console.log(this.all_products) 

这表明我确实正确地填充了数组（我只是没有记录（这个）特定实例）

我有很多基础知识要学习，我在全职工作时把这当作一种业余爱好，所以让我知道我做事的方式是否需要工作，我对数组的使用等等

此外，对于上下文，我计划迭代all_products数组并将其呈现给每个select选项

<div id="v-for-all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option v-for="product in all_products">{{ product }}</option>
      </select>
    </div>

{{product}}

如果您需要更多上下文/信息，请告诉我

我已更改

console.log(all_products)
to 
console.log(this.all_products) 

console.log(all_products)
to 
console.log(this.all_products) 

这解决了我的数组未定义/为空的问题，因为我不是作用域中正确数组的console.log（this.instance）

对于我的绑定问题，我意识到我正在迭代div中的所有_产品，我应该在中初始化绑定并迭代select选项中的每个子元素，如下所示

<div id="v-for-all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option v-for="product in all_products">{{ product }}</option>
      </select>
    </div>

{{product}}

也变了

<div id="all_products">
    <div class="input-group mb-3">
      <select class="custom-select" id="">
        <option>Select a product...</option>
        <option v-for="({product}, index) in all_products" :key="index"> {{ product }}</option>
      </select>
    </div>

选择一个产品。。。
{{product}}

您的意思是

控制台.log（这是所有产品）

？？？因为var all_products`与

这不一样。all_products

。。。至于v-for

v-for=“所有产品中的产品”

看起来差不多正确。。。但也许您想要

{{product.product}}

。。。也许你想要

v-for=“（产品，索引）在所有产品中”：key=“index”>{{product.product}

或者甚至

v-for=“（{product}，索引）在所有产品中：key=“index”>{product}

是的，你是对的。谢谢你的帮助。在记录了this.all_产品的实例后，它将正确显示。至于绑定/迭代，我很确定你又找到了。我很感激，伙计