首页 > 解决方案 > 迭代对象

问题描述

我有一个这样的对象:

 obj: {
        'tags': {
                '0': 'One',
                '1': 'Two',
                '2': 'Three',
                '3': 'Four',
                '4': 'Five',
                '5': 'Six',
                }

我这样做:

<div
    v-for="(tag, index) in obj.tags">
    <v-text-field
     v-model="tag"

    >
    </v-text-field>
</div>

我想在 vuetify 文本字段中显示该值,但是当我执行 vfor 时,我收到以下消息:

<v-text-field v-model="tag">: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

我能怎么做 ?

标签: javascriptvue.jsvuetify.js

解决方案


因为标签是您正在使用的对象的“别名”,所以我们不能通过该别名引用它。

但是,我们可以使用 v-for 中的索引将其重新绑定到原始对象。

这将为您绑定它。

<v-text-field v-model="obj.tags[index]">    
</v-text-field>

推荐阅读