当前位置：首页 > VUE

vue实现留言回复

2026-01-18 22:17:04VUE

使用 Vue 实现留言回复功能

数据结构设计

留言和回复可以采用嵌套结构存储，每条留言包含一个回复列表。示例数据结构如下：

data() {
  return {
    messages: [
      {
        id: 1,
        content: "第一条留言",
        replies: [
          { id: 101, content: "回复第一条留言" }
        ]
      }
    ],
    newMessage: "",
    replyTo: null  // 存储当前回复的留言ID
  }
}

模板渲染

使用 v-for 嵌套渲染留言和回复列表：

<div v-for="message in messages" :key="message.id">
  <div>{{ message.content }}</div>
  <button @click="startReply(message.id)">回复</button>

  <div v-for="reply in message.replies" :key="reply.id">
    <div>→ {{ reply.content }}</div>
  </div>

  <div v-if="replyTo === message.id">
    <input v-model="newReply" placeholder="输入回复内容">
    <button @click="submitReply(message.id)">提交</button>
  </div>
</div>

方法实现

添加回复功能的核心方法：

methods: {
  startReply(messageId) {
    this.replyTo = messageId
    this.newReply = ""
  },

  submitReply(messageId) {
    const message = this.messages.find(m => m.id === messageId)
    if (message && this.newReply.trim()) {
      message.replies.push({
        id: Date.now(),
        content: this.newReply.trim()
      })
      this.replyTo = null
      this.newReply = ""
    }
  }
}

样式优化

为区分留言和回复，可以添加CSS样式：

.message {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

.reply {
  margin-left: 30px;
  color: #666;
  font-size: 0.9em;
}

完整组件示例

<template>
  <div>
    <div v-for="message in messages" :key="message.id" class="message">
      <div>{{ message.content }}</div>
      <button @click="startReply(message.id)">回复</button>

      <div v-for="reply in message.replies" :key="reply.id" class="reply">
        <div>→ {{ reply.content }}</div>
      </div>

      <div v-if="replyTo === message.id">
        <input v-model="newReply" placeholder="输入回复内容">
        <button @click="submitReply(message.id)">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          id: 1,
          content: "第一条留言",
          replies: [
            { id: 101, content: "回复第一条留言" }
          ]
        }
      ],
      replyTo: null,
      newReply: ""
    }
  },
  methods: {
    startReply(messageId) {
      this.replyTo = messageId
      this.newReply = ""
    },
    submitReply(messageId) {
      const message = this.messages.find(m => m.id === messageId)
      if (message && this.newReply.trim()) {
        message.replies.push({
          id: Date.now(),
          content: this.newReply.trim()
        })
        this.replyTo = null
        this.newReply = ""
      }
    }
  }
}
</script>

<style>
/* 添加前面提到的样式 */
</style>