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>

在此模板中，当我添加其中一些并选择一个值时，所有其他组件（选择框）都会以相同的值更新。如何让它们具有唯一值？

Vue的

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：

在v-for块内部，我们可以完全访问父作用域属性。 v-for还支持索引的可选第二个参数当前项目。

<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>

Vuejs v-for设置唯一数据

1 个答案: