javascript - 项目未保存，重新单击编辑后更改回原始状态

Question

我正在使用 Vue.js，当单击按钮进行编辑时，它可以很好地编辑，但是当我单击回来时，它只会将其更改回编辑前的文本状态。例如，在显示“鸡肉”的框中，我按编辑，然后放入米饭，然后再次按编辑，它会将其更改回“鸡肉”。

<tr v-for="(foodItem, index) in filteredFoodItems" :key="index">
   <td>
       <input v-bind:value="foodItem.name" v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input">
   </td>
   <td>
        <input v-bind:value="foodItem.price | currency('£')" v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input">
   </td>
   <td>
        <input v-bind:value="foodItem.category" v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input">
   </td>
   <td>

这是输入字段，这是我当前正在使用的按钮 -

<button class="button is-fullwidth" v-on:click="foodItem.editing = !foodItem.editing" v-bind:value="foodItem.editing ? 'Save': 'Edit'">Edit</button>

此外，该按钮不会更改以保存它，它会保持编辑状态。

Answer 1

数据未保存，因为输入仅使用 value而不是v-model .

v-model 在表单输入上创建双向数据绑定(bind)。 (获取和设置值。)

按钮值未更改，因为字符串已在 value 中设置属性。相反，将字符串放在作品之间。

<button class="button is-fullwidth" v-on:click="foodItem.editing = !foodItem.editing" >{{ foodItem.editing ? 'Save': 'Edit' }}</button>