VueJS多个下拉菜单-渲染选项取决于第一个选择的值

如何解决VueJS多个下拉菜单-渲染选项取决于第一个选择的值

我在尝试呈现第二个选择下拉菜单时遇到了一些问题。我目前正在使用axios从API中获取数据。第二个选择下拉菜单的选项取决于第一个下拉菜单中选择的内容。

JSON如下：

source ~/.bashrc

基于JSON，在第一个选择下拉列表中，我正确渲染了 {{citizen.name}}，在这种情况下，该渲染将是： Boy1 和 Boy2 。

但是，在第二个下拉列表中，我想将 citizen.contact.name 呈现在第一个选定的下拉列表（v模型）中。例如，我选择Boy1，第二个下拉列表应该有Mother1和Father1。如果我选择Boy2，则应该是Mother2和Father2。

    {
    "citizens": [
        {
          "id": 1,"name": "Boy1","contact": [
            {
              "id": "1","name": "Mother1"
            },{
              "id": "2","name": "Father1"
            }
          ]
        },{
          "id": 2,"name": "Boy2","name": "Mother2"
            },"name": "Father2"
            }
          ]
        }
      ],}

我正在返回公民的data（）：[]并选择一个：“”。我尝试在两个选择标签（selectOne和selectTwo）和计算属性上添加v模型：

    <select v-model="selectOne">
    <option v-for="citizen of citizens" :key="citizen.id">{{citizen.name}}</option>
    </select>
    
    <select v-model="selectTwo">
    <option>Mother1</option>
    <option>Father1</option>
    </select>

解决方法

只需绑定选择的整个citizen，例如称为selected。使用整个citizen对象的值，然后您可以在第二秒中选择通过selected.contact进行迭代：

<select v-model="selected">
  <option :value="citizen" v-for="citizen of citizens" :key="citizen.id">{{citizen.name}}</option>
</select>

<!-- Maybe need a v-model here too so you can keep track of choice -->
<select v-model="selectedContact">
  <option v-for="contact of selected.contact" :key="contact.id">{{contact.name}}</option>
</select>

，然后向脚本中添加selected（和selectedContact）作为变量。

如果您想保留第一个选择作为字符串而不绑定整个对象，则可以尝试使用计算属性，例如：

contacts() {
  return this.selected ? this.citizens.find(x => x.name === this.selected).contact : []
}

和模板：

<select v-model="selected">
  <option v-for="citizen of citizens" :key="citizen.id">{{citizen.name}}</option>
</select>

<select v-model="selectedContact">
  <option v-for="contact of contacts" :key="contact.id">{{contact.name}}</option>
</select>