vue.js 從 json 數據中填充 2 個下拉列表

Question

在我的第三個練習中，我有一個 json 文件，其中包含有關汽車及其型號的信息。 我正在嘗試從該文件中填充 2 個下拉列表：1 用於汽車和另一個下拉列表中的相應模型，但無法做到這一點。

在我在下面所做的模型下拉列表中，我看到了一些空元素！ （可能對應於previos選擇中的位置）。 我希望模型下拉菜單默認始終包含第一項。 感謝幫助。

json文件數據：

[
  {"name": "Abarth",
   "models": [
      {"name": "124 Spider", "series": null},
      {"name": "500", "series": null},
    ]
  },
  {"name": "Acura", 
   "models": [
      {"name": "MDX", "series": null},
      {"name": "NSX", "series": null},
      {"name": "RL", "series": null},
      {"name": "RSX", "series": null},  
    ]
  },
]   

我的代碼：

<template>
  <div>
    Make:<select @change="switchView($event, $event.target.selectedIndex)">
      <option
        v-for="(item, index) in logitems"
        :key="index"
        v-bind:value="this.selected"
      >
        {{ item.name }}
      </option>
    </select>

    Model:<select>
      <option
        v-for="(item, index1) in logitems"  
        :key="item"
      >
        {{ logitems[selectedIndex].models[index1]}} //not able to get the name !
      </option>
    </select>
  </div>
</template>


<script>
import logs from "../assets/car-makes.json";
export default {
  data() {
    return {
      logitems: logs,
      selectedIndex: "0",
     
      selected: {
        name: "Abarth",
        models: [
          {
            name: "124 Spider",
            series: null,
          },
          {
            name: "500",
            series: null,
          },
        ],
      },
    };
  },

  methods: {
    switchView: function (event, selectedIndex) {
      console.log(event, selectedIndex);
      this.selectedIndex = selectedIndex;
    },
    
  },


};
</script>

Answer 1

試試下面的代碼片段：

 new Vue({ el: '#demo', data() { return { logitems: [ { name: "Abarth", models: [{name: "124 Spider", series: null}, {name: "500", series: null},] }, { name: "Acura", models: [{name: "MDX", series: null}, {name: "NSX", series: null}, {name: "RL", series: null }, {name: "RSX", series: null },] }, ], selected: { name: 'Abarth', model: '' } }; }, computed: { models(){ return this.logitems.filter(l => l.name === this.selected.name) } }, methods: { clearModel() { this.selected.model = this.logitems.find(l => l.name === this.selected.name).models[0].name } } }) Vue.config.productionTip = false Vue.config.devtools = false

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div> Make:<select v-model="selected.name" @change="clearModel"> <option v-for="(item, index) in logitems" :key="index" :value="item.name" > {{ item.name }} </option> </select> Model:<select v-model="selected.model"> <option v-for="(item, i) in models[0].models" :key="i"> {{ item.name }} </option> </select> <p>{{ selected }}</p> </div> </div>