Vue.js：v-html与函数存在冲突问题咨询

嘿，我来帮你搞定这个v-html和现有逻辑冲突的问题！先看你的代码结构，核心矛盾其实出在v-html的行为特性和你对<router-link>的结构设计上，我一步步给你拆解和修复：

问题根源 #

• v-html会完全覆盖元素内容：你把v-html="item.message"直接绑定在<router-link>上，这会让Vue用item.message的HTML内容完全替换掉<router-link>内部的所有子元素——包括你写的<br>和显示时间的<span>，所以时间根本没法显示出来，这也是你觉得“冲突”的主要原因。
• 潜在的路由跳转冲突：如果item.message里包含<a>标签这类可点击元素，还会和<router-link>本身的跳转逻辑打架，导致点击行为不符合预期。

修复方案 #

1. 调整DOM结构，分离v-html与其他内容 #

把v-html放到<router-link>内部的单独元素里，这样既能渲染通知消息的HTML，又能保留时间显示和原有结构：

<template>
  <div>
    <li class="g-line-height-1_2">
      <router-link 
        :to="linkFromNotification(item)" 
        @click.native="readNotification(item)" 
        :class="activeNotification"
      >
        <!-- 用独立的span承载v-html内容 -->
        <span v-html="item.message"></span>
        <br>
        <span class="g-font-size-12 g-color-gray-dark-v5">
          {{ getTime }}
        </span>
      </router-link>
    </li>
    <li>
      <hr class="g-my-0">
    </li>
  </div>
</template>

2. 完善脚本中的缺失逻辑 #

看你的脚本里没有定义getTime、linkFromNotification，也没引入mapActions对应的方法，这些缺失也会导致功能异常，我帮你补全：

<script>
import { mapActions, mapGetters } from 'vuex';
import moment from 'moment';
export default {
  props: ['item'],
  computed: {
    ...mapGetters([
      'getLastNotifications',
      'getNotifications',
    ]),
    activeNotification() {
      // 未读状态也要返回对应的类名，避免样式丢失
      return this.item.viewed 
        ? 'nav-link g-bg-gray-light-v5--hover g-px-20 g-py-10 u-link-v5'
        : 'nav-link g-px-20 g-py-10 u-link-v5'; // 示例未读样式，你可以根据实际需求调整
    },
    // 格式化通知时间（假设item包含time字段，根据实际字段名修改）
    getTime() {
      return moment(this.item.time).format('YYYY-MM-DD HH:mm');
    }
  },
  methods: {
    ...mapActions([
      // 确保Vuex中已定义这个action
      'readNotification'
    ]),
    // 根据通知item生成路由跳转地址
    linkFromNotification(item) {
      // 示例：跳转到通知详情页，根据你的路由配置修改
      return { name: 'NotificationDetail', params: { id: item.id } };
    }
  }
}
</script>

额外提醒 #

• XSS安全风险：使用v-html时，一定要保证item.message的内容是后端过滤过的可信内容，防止恶意脚本注入。
• 事件冒泡处理：如果item.message里有可点击元素，可能会触发readNotification多次，必要时可以给v-html的元素加上@click.stop阻止冒泡。

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