Vue.js: 冲突 v-html 和一个函数

Question

这是通知组件的模板：

<template>
 <div>
  <li class="g-line-height-1_2">
   <router-link :to="linkFromNotification(item)"
               @click.native="readNotification(item)"
               v-html="item.message"
               :class="activeNotification">
  <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>

<script>
import { mapActions, mapGetters } from 'vuex';
import moment from 'moment';


export default {
 props: ['item'],
 computed: {
  ...mapGetters([
    'getLastNotifications',
    'getNotifications',
  ]),
  activeNotification() {
    if (this.item.viewed === true) {
      return 'nav-link g-bg-gray-light-v5--hover g-px-20 g-py-10 u-link-v5'
    } else {
      return 'nav-link g-bg-primary-opacity-x--hover g-bg-primary-opacity-x2 g-px-20 g-py-10 u-link-v5'
    }
  },
  getTime() {
    moment.locale('ru');
    return moment(this.item.created_at, 'YYYY-MM-DD HH:mm:ss Z').fromNow();
  },
},
methods: {
  ...mapActions([
    'notifications',
    'readNotification'
  ]),
  linkFromNotification(item) {
    if (item.notification_type === 'user_subscribed') {
      return {name: 'person', params: {id: item.object_id}}
    } else if (['comment_created', 'answer_selected', 'answer_created'].includes(item.notification_type)) {
      // TODO: link must be constructed with hash
      return `/posts/${item.object_id}#${item.anchor}`;
    } else if (item.notification_type === 'user_coauthored') {
      return {name: 'show_post', params: {id: item.object_id}}
    }
  }
 }
}
</script>

每个通知都使用 v-html 从服务器获取文本。现在我可以看到通知的文本，但看不到它的时间。似乎我的函数 getTime 与 router-link 中的某些内容重叠。当我尝试将 <span> 与功能 getTime 放在 router-link 下时，显示了通知时间，但我的页面布局正在折叠。请帮忙！

Answer 1

v-html 设置它附加到的元素的内容。包含标签内的任何内容都将被覆盖。要将 HTML 添加到现有内容，请在要插入 HTML 的位置创建 <span>，然后将 v-html 放在该范围内。

Vue.js: 冲突 v-html 和一个函数

Vue.js: conflict v-html and a function

javascript

directive

momentjs

vue.js

vue-component