在vue/vuex中保存或取消编辑

<template>
  <div>
    <div v-if="editing">
      <input v-model="editData.content" type="text">
      <button @click="saveEdit">保存</button>
      <button @click="cancelEdit">取消</button>
    </div>
    <div v-else>
      <span>{{ editData.content }}</span>
      <button @click="startEdit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editData: {
        editing: false,
        content: '默认内容'
      }
    }
  },
  methods: {
    startEdit() {
      this.editData.editing = true;
    },
    saveEdit() {
      // 保存编辑内容的逻辑
      this.editData.editing = false;
    },
    cancelEdit() {
      // 取消编辑的逻辑
      this.editData.editing = false;
    }
  }
}
</script>