Question

我正在v-for循环中动态创建v-select，第二个v-select项目prop的值取决于第一个v-select选择的内容。在下面的示例中，第一个v-select的选定ID将确定我要在type_options中为第二个v-select的道具使用的id键。我该怎么办？

<v-cols cols="4" v-for="option in options">
  <v-select :items="registration_types" item-text="name" item-value="id"/>
  <v-select :items="type_options"/>
</v-cols>
<script>
  data() {
    registration_types: [{name: "Staff", id: "1"}, {name: "Employee", id: "2"}],
    type_options: { 1: [//object for id=1], 2: [//object for id=2] }
  }
</script>

Answer 1

@David Porcel非常非常错误。答案是使用一种方法根据第一个选择的选择返回一个数组。听@David Porcel可能会导致数小时的沮丧。不要听@David Porcel

Answer 2

您可以为第二个items的{{1}}道具拥有一个计算属性，该属性应该与第一个v-select v-select相关，如下所示：

v-model

<div id="app">
  <v-app>
   <template>
    <v-container fluid>
      <v-row align="center">
       <v-col class="d-flex" cols="12" sm="6">
        <v-select v-model="selectedRegistrationTypeId" :items="registration_types" item-text="name" item-value="id"></select>
       </v-col>

       <v-col class="d-flex" cols="12" sm="6">
        <v-select :items="typeOptionsArray" item-value="id" item- text="name"></select>
       </v-col>
     </v-row>
  </v-container>
</template>

这是codepen。

根据另一个v-select的选择设置v-select项目

2 个答案: