Vue中的对象上的环

Question

我需要根据值显示带有vutify的v选择。

例如，在这个Codepen中，我有一个汽车和摩托车的物体，我想显示2选择菜单，并在对象上循环一个循环。

我该怎么办？https://codepen.io/czechsebastian/pen/jOPYmJZ

new Vue({
  el: '#app',
  data (){
    return{
      selectedVersion:null,
      version: [{
        "car": [
          "1.0",
          "1.2",
          "1.3",
          "1.4",
        ],
        "motorcycle": [
          "2.1",
          "2.2",
          "2.3",
          "2.4",
        ],

      }

      ]
    }
  },
  methods: {
  }
})

Answer 1

要填充v-select，您只需将数组传递给道具prop。但是对于selectedVersion var则不会，您必须制作一个数组或几个变量，因为每个v-select都有其自己的v-model变量。

在此示例中，您可以根据需要替换div标签的容器和行，如果需要，可以完全消除v-col。

尝试这样的事情：

<template>
  <v-container>
    <v-row v-for="(version, index) in versions" :key="index">
      <v-col md6>
        <v-select :items="version.car" label="Cars" v-model="selectedCarVersion[index]"></v-select>
      </v-col>
      <v-col md6>
        <v-select :items="version.motorcycle" label="Motorcycle" v-model="selectedMotorCycleVersion[index]"></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data() {
    return {

      versions: [
        {
          car: ["1.0", "1.2", "1.3", "1.4"],
          motorcycle: ["2.1", "2.2", "2.3", "2.4"]
        }
      ],
      selectedCarVersion: [],
      selectedMotorCycleVersion: []
    };
  }
};
</script>