vue实现评论编辑

Vue 实现评论编辑功能

数据绑定与表单结构

在 Vue 中通过 v-model 实现双向数据绑定，创建一个编辑表单。例如：

<template>
  <div v-if="isEditing">
    <textarea v-model="editedContent"></textarea>
    <button @click="saveEdit">保存</button>
    <button @click="cancelEdit">取消</button>
  </div>
  <div v-else>
    <p>{{ comment.content }}</p>
    <button @click="startEdit">编辑</button>
  </div>
</template>

编辑状态管理

通过 data 或 ref（Composition API）管理编辑状态和临时内容：

// Options API
data() {
  return {
    isEditing: false,
    editedContent: ''
  }
}

// Composition API
import { ref } from 'vue';
const isEditing = ref(false);
const editedContent = ref('');

方法实现

定义编辑相关方法，包括开始编辑、保存和取消操作：

methods: {
  startEdit() {
    this.editedContent = this.comment.content;
    this.isEditing = true;
  },
  saveEdit() {
    this.$emit('update-comment', {
      id: this.comment.id,
      content: this.editedContent
    });
    this.isEditing = false;
  },
  cancelEdit() {
    this.isEditing = false;
  }
}

父子组件通信

通过 props 接收评论数据，通过 $emit 提交修改：

props: {
  comment: {
    type: Object,
    required: true
  }
}

样式与用户体验

添加基础样式和交互反馈：

textarea {
  width: 100%;
  min-height: 100px;
  padding: 8px;
}
button {
  margin-right: 8px;
}

完整示例（Composition API）

<script setup>
import { ref } from 'vue';

const props = defineProps({
  comment: Object
});
const emit = defineEmits(['update-comment']);

const isEditing = ref(false);
const editedContent = ref('');

const startEdit = () => {
  editedContent.value = props.comment.content;
  isEditing.value = true;
};

const saveEdit = () => {
  emit('update-comment', {
    id: props.comment.id,
    content: editedContent.value
  });
  isEditing.value = false;
};

const cancelEdit = () => {
  isEditing.value = false;
};
</script>