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

Question

我正在使用Vue.js，当点击按钮进行编辑时编辑很好，但当我点击它时，它只是将其更改回编辑前的文本。例如，它在盒子里面写着鸡，我按下编辑，我把赖斯再次按下编辑，它会将它改回鸡。

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

这是输入字段，这是我目前使用的按钮 -

virtualenv

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

Answer 1

由于输入仅使用value而非v-model，因此未保存数据。

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

由于字符串是在value属性中设置的，因此不会更改按钮值。相反，将字符串放在工作之间。

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