Vue3中如何点击<td>元素切换显示文本内容？

问题描述 #

我有一个展示邮件数据的表格，邮件主题初始通过substr方法截断显示。希望点击表格数据单元格时，切换显示完整的邮件主题。当前使用的代码如下：

<tbody>
  <tr v-for="email in emails.data" :key="email.id">
    <td v-text="store.getSubjectTruncated(email)" :title="store.getSubject(email)"></td>
    ...
</tbody>

目前仅能通过 hover 单元格时，在title属性中查看完整主题。是否可以通过类似@click="v-text = getSubject(email)"的方式实现需求？

解决方案 #

你没法直接在@click事件里修改v-text指令的值，因为v-text是绑定到数据/计算属性的，得通过状态切换来实现显示逻辑。以下是几种可行的实现方式：

方式1：给每个邮件项添加本地状态（Vue 2/Vue 3通用）

在组件的data里维护一个对象，记录每个邮件是否展开完整主题：

// 组件脚本部分
export default {
  data() {
    return {
      expandedSubjects: {} // 键为email.id，值为布尔值标记是否展开
    }
  },
  methods: {
    toggleSubject(emailId) {
      this.expandedSubjects[emailId] = !this.expandedSubjects[emailId]
    }
  }
}

修改模板，根据状态切换显示内容：

<tbody>
  <tr v-for="email in emails.data" :key="email.id">
    <td 
      @click="toggleSubject(email.id)"
      :title="store.getSubject(email)"
      style="cursor: pointer;"
    >
      {{ expandedSubjects[email.id] ? store.getSubject(email) : store.getSubjectTruncated(email) }}
    </td>
    ...
</tbody>

方式2：结合全局状态管理（Pinia/Vuex）

如果邮件数据存在全局状态中，可以单独维护展开状态的集合，避免组件刷新后状态丢失：

// Pinia示例
import { defineStore } from 'pinia'

export const useEmailStore = defineStore('email', {
  state: () => ({
    expandedSubjectIds: new Set()
  }),
  actions: {
    toggleSubject(emailId) {
      this.expandedSubjectIds.has(emailId) 
        ? this.expandedSubjectIds.delete(emailId) 
        : this.expandedSubjectIds.add(emailId)
    }
  },
  getters: {
    getDisplaySubject: (state) => (email) => {
      return state.expandedSubjectIds.has(email.id) 
        ? store.getSubject(email) 
        : store.getSubjectTruncated(email)
    }
  }
})

模板中直接使用全局状态的getter和方法：

<tbody>
  <tr v-for="email in emails.data" :key="email.id">
    <td 
      @click="store.toggleSubject(email.id)"
      :title="store.getSubject(email)"
      style="cursor: pointer;"
    >
      {{ store.getDisplaySubject(email) }}
    </td>
    ...
</tbody>

内容的提问来源于stack exchange，提问作者RyanJG