如何从 vue-js 中的 v-for="(value,key) in obj" 更新值

Question

我有带有键值对的对象，我正在使用 for 循环。

     <CCol
            sm="6"
            v-for="(
              my_value, my_key
            ) in my_obj"
            :key="my_key"
          >
            <CInput
              :label="my_key"
              type="text"
              :placeholder="my_value" // I can use my_value as the placeholder
              :v-model="my_value" // but if I use my_value in v-model it gives an error
            />
          </CCol>

我正在尝试将键显示为标签，将值显示为文本框的值，用户可以更新该值。

当我在 v-model 中使用 value 时，它​​会给出错误“v-model”指令无法更新迭代变量“my_value”本身。”但我只能像占位符一样将它用于显示目的。

我需要可更新的值。

欢迎提出任何建议。提前致谢。

Answer 1

尝试添加索引，然后您可以使用键来引用相应的值：

  <CCol
            sm="6"
            v-for="(
              my_value, my_key,index
            ) in my_obj"
            :key="my_key"
          >
            <CInput
              :label="my_key"
              type="text"
              :placeholder="my_value" 
              v-model="my_obj[my_key]" 
            />
          </CCol>

当你迭代一个像这样的对象时：

user:{
  first_name:'John',
  last_name:'Doe'
  age:25
}

语法v-for="(val,index) in user" 会给你每个值和它的索引，但是当你这样做时v-for="(val,key,index) in user" 这会给你值，它的键和索引。

正确的绑定是v-model="object[key]"，它可以代表user.age，错误的绑定是使用v-model="val"和val，在这种情况下，仅在25或Doe这样的模板中不可用作为属性存在于脚本中