在Vue中编辑数组的最佳方法。 v型问题

Posted 2023-01-28

我对Vue还是很陌生，一直在尝试使用v-model属性编辑字符串数组。我创建了一个小jsfiddle，并且在编辑数组时遇到问题。弹出一个错误，提示我在使用v模型时应该使用一个对象，但是当我按下删除按钮时，似乎知道它已被编辑。同时添加新的输入字段将重置先前的输入字段。

什么是最好的编辑数组并使其保持相同格式的方法

答案

i分叉了您的jsfiddle，基本上，在发出input事件时，我更改了输入元素的绑定以修改其值：

<input id="field-option-0" class="input-large form-control" type="text" @input="inputHandler(index, $event)" :value="option">

现在您正在将列表的当前索引和本地$event传递给处理程序函数，以在列表上进行设置。

inputHandler(index, e) 
  this.field_data.value_options[index] = e.target.value

另一答案

您可以这样做，但是Vue警告您不应该这样做，因为这样做可能会产生不良的副作用。在这种简单情况下不太明显。

警告的建议是，应使每个数组元素成为一个对象，并改为引用该对象的属性。这样，您可以维护阵列的完整性。

value_options: [
   key: 1, value: 'testing bro' ,
   key: 1, value: 'yea testing' 
];

然后引用属性而不是数组元素本身。

 <div v-for="(option, index) in field_data.value_options">
      <input v-model="option.value">