【问题系列】vue当编辑框被触发就出现保存按钮

目录

问题描述：

解决方案：

1.方案一

2.方案二

3.方案三

---

问题描述：

一个表单用vue的事件实现当点击编辑按钮(或图标)出现保存按钮，当要编辑的时候只出现编辑按钮，此时保存按钮隐藏

解决方案：

1.方案一

可以使用Vue中的v-if和v-show指令来控制按钮的显示和隐藏。

1. v-if会完全销毁和重新创建DOM元素
2. v-show只是控制元素的显示和隐藏。

以下是一个简单的示例代码，用于根据按钮的状态显示不同的按钮：

<template>
  <div>
    <button v-if="!editing" @click="startEditing()">Edit</button>
    <button v-if="editing" @click="saveChanges()">Save</button>
    <!-- 编辑表单 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      editing: false
    };
  },
  methods: {
    startEditing() {
      this.editing = true;
    },
    saveChanges() {
      // 保存表单数据
      this.editing = false;
    }
  }
};
</script>

在上面的代码中，使用了一个布尔值editing来表示当前表单是否处于编辑状态。

当editing为false时，显示"Edit"按钮。当editing为true时，显示"Save"按钮。

在startEditing()方法中，可以将editing设置为true，以便在下次渲染时显示"Save"按钮。在saveChanges()方法中，可以执行保存表单数据的操作，并将editing设置为false，以便在下次渲染时显示"Edit"按钮。

在编辑表单中，可以使用v-show指令来根据editing的状态显示或隐藏表单元素，例如：

<!-- 编辑表单 -->
<form v-show="editing">
  <!-- 表单元素 -->
</form>

在这个示例中，当editing为true时，表单会显示出来；当editing为false时，表单会隐藏起来。

2.方案二

可以使用Vue的条件渲染指令v-if和v-show来实现这个功能。

假设你的编辑按钮和保存按钮是两个不同的组件，并且您需要在两个组件之间传递状态，就可以使用Vue的事件系统来实现。

例如，当点击编辑按钮时，触发一个事件，将状态传递给父组件，父组件根据状态来显示或隐藏保存按钮。

以下是一个示例代码，演示了如何使用Vue的事件系统和条件渲染指令来实现这个功能。

<template>
  <div>
    <!-- 编辑按钮组件 -->
    <edit-button @edit-clicked="showSaveButton"></edit-button>
    
    <!-- 保存按钮组件，根据 showSaveButton 的值来显示或隐藏 -->
    <save-button v-if="showSaveButton"></save-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSaveButton: false // 初始状态为不显示保存按钮
    };
  },
  methods: {
    showSaveButton() {
      this.showSaveButton = true; // 当点击编辑按钮时，显示保存按钮
    }
  }
};
</script>

 在这个示例代码中，当编辑按钮组件被点击时，会触发一个名为 edit-clicked 的事件，并调用 showSaveButton 方法。

在 showSaveButton 方法中，将 showSaveButton 的值设置为 true，这样保存按钮组件就会显示出来。

保存按钮组件使用 v-if 条件渲染指令来根据 showSaveButton 的值来显示或隐藏。

3.方案三

可以使用Vue的条件渲染指令v-if和v-show来控制编辑和保存按钮的显示和隐藏。

首先，在你的Vue组件中创建一个布尔类型的data属性，用于控制编辑和保存按钮的显示和隐藏：

data() {
  return {
    isEditing: false
  }
}

然后，在模板中使用v-if和v-show指令来控制按钮的显示和隐藏。

当isEditing为true时，显示保存按钮，否则显示编辑按钮：

<template>
  <div>
    <button v-if="!isEditing" @click="isEditing = true">编辑</button>
    <button v-show="isEditing" @click="isEditing = false">保存</button>
  </div>
</template>

这样，当你点击编辑按钮时，它将触发@click事件，将isEditing设置为true，然后保存按钮将显示。

当你点击保存按钮时，它将触发@click事件，将isEditing设置为false，然后编辑按钮将再次显示。

注意，使用v-if指令可以完全从DOM中移除元素，而v-show指令仅仅是设置CSS的display属性为none，所以在这种情况下，建议使用v-show指令，因为它可以避免重新渲染DOM元素，提高性能。