vue.js - Vuejs v-for 设置唯一数据

Question

我有一个组件，当我点击按钮时我可以添加它。

<button type="submit" @click="components ++">add select box</button>
<div v-for="component in components">
    <select class="selectpicker form-control" v-model="customized_exercise.name" value={{exercise.id}}> 
        <option v-for="exercise in exercises">{{ exercise.name }}</option>
    </select> 
</div>

在这个模板中，当我添加其中几个并选择一个值时，所有其他组件(选择框)都会更新为相同的值。我怎样才能使它们具有唯一值？

视觉

import ExerciseSelectbox from './ExerciseSelectbox.vue'
export default {

    methods: {
        fetchexercises: function(){
            this.$http.get('/api/exerciseinstructions').then(function (data) {
               this.$set('exercises',data['data'])
            })    
        },
    },

    comoponents: { ExerciseSelectbox  },
     data() {
         return{
             components: 1,
             newCustomizedExercise : {
                id:'',
                name:'',
                reps:'',
                sets_duration:'',
                weight:'',

             },


            numbers:[100]    

        }
    },

    ready() {
       this.fetchexercises()

    }
}

Answer 1

这是旧的，但我也在寻找这个答案。我发现 Vue 文档提到了 this :

Inside v-for blocks we have full access to parent scope properties.v-for also supports an optional second argument for the index of thecurrent item.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

因此，您可以使用此 index 参数来设置循环中每个元素的 ID，以保持每个元素独立。

或者您可以将您的模型设置为数组中的名称。类似于 v-model="customized_exercise[index].name"。但我还没有真正尝试过这个选项。

我找到了另一个 SO answer关于如何使用 v-bind 如果你想在数据属性中字符串连接索引变量。

<a v-bind:href="'uniqueName' + index">12312</a>