Javascript 项目未保存，重新单击“编辑”后将更改回其原始状态

我使用的是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>

---

此外，该按钮不会更改为“保存”，并将其自身保持为“编辑”。

数据不会保存，因为输入只使用值而不使用值

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

按钮值未更改，因为字符串是在值属性中设置的。相反，把绳子放在两者之间是可行的

---

{{foodItem.editing？'Save'：'Edit'}

从何处单击返回？它首先要去哪里？这是非常不清楚的当我单击编辑按钮时，我编辑文本，然后再次单击编辑按钮保存更改，但它只是将文本设置回其原始状态。因为您没有使用v-model？{{foodItem.editing？'save'：'edit'}是否要将这两个答案放在一起，以便我们可以按回答的方式清除此问题，其他人可能会发现这很有用。