Question

如何使用带有v-for的动态键设置v-model？下面的代码不会更新模型。

我正在使用vuetify框架。

我的代码在下面
模板

<v-card v-for="(value, key) in myData">
<v-checkbox v-model='selected[key]' :name="key" ></v-checkbox>
</v-card>

脚本

export default {
        props: {
           myData : Object
         },
        data: function(){
            return {
                selected: {},
                active: null,
            }
        },
        methods: {
            setModels: function()
            {
                let data = this.myData;
                let sel = this.selected;
                Object.keys(data).forEach(function(key){
                    if(typeof data[key]== 'object')
                    {
                        sel[key] = []

                    }
                });


            },


        },

        mounted() {
           this.setModels();
        }
    }

Answer 1

您可以创建一个方法：

methods: {
    isSelected (key) {
        return this.selected.includes(key);
    }
}

并将v-model设置为v-model="isSelected(key)"

Answer 2

尝试： <v-card v-for="(item, index) in myData"> <v-checkbox v-model="item" :name="index" ></v-checkbox> </v-card>

我不明白的是..为什么myData是obj而不是obj数组？然后，您可以这样做：

<v-card v-for="item in myData"> <v-checkbox v-model="item.checked" :name="item.name" ></v-checkbox> </v-card>

Vue JS使用动态属性设置V模型

2 个答案: