vue.js 根据 json 数据填充 2 个下拉菜单

Question

在我的第三个练习中，我有一个 json 文件，其中包含有关汽车及其模型的信息。我正在尝试从 file:1 的汽车和其他下拉列表中的相应模型中填充 2 个下拉列表，但无法做到这一点。

在我下面做的模型下拉列表中，我看到了一些空元素！（可能对应于先前选择中占据的位置）。我想让模型下拉列表默认总是有第一项。感谢您的帮助。

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>

vue.js 根据 json 数据填充 2 个下拉菜单

vue.js populate 2 dropdowns from json data

javascript

vue.js

vuejs2

我的代码：