vue js 在 watch 方法中使用 v-on

Question

我有一个组件，它有一个名为 rows 的数据属性，用于填充动态表（我使用的是 Datatables）。 我有一个名为 clientLeads 的计算属性，用于加载存储数据。 我有一个监视函数来监视 clientLeads 计算属性并更新 rows 数据属性。

我想使用 router-link 组件创建一个指向个人资料页面的 Vue JS 路由器链接。

这是 Datatables 组件（src：https://codepen.io/stwilson/pen/oBRePd）：

<script>
import 'datatables.net-bs4'
import jQuery from 'jquery'

export default {
  template: '<table class="table table-striped dt-responsive nowrap" style="width:100%"></table>',
  props: {
    headers: {
      default () {
        return {}
      }
    },
    rows: {
      default () {
        return []
      }
    }
  },
  data () {
    return {
      dTHandle: null
    }
  },
  watch: {
    rows (val, oldVal) {
      let vm = this
      vm.dtHandle.clear()
      vm.dtHandle.rows.add(vm.rows)
      vm.dtHandle.draw()
    }
  },
  mounted () {
    let vm = this
    vm.dtHandle = jQuery(this.$el).DataTable({
      classes: {
        sWrapper: 'dataTables_wrapper dt-bootstrap4'
      },
      columns: vm.headers,
      data: vm.rows,
      searching: false,
      paging: false,
      info: true,
      responsive: {
        details: {
          type: 'column'
        }
      }
    })
  }
}
</script>

这是我的视图组件：

<template> 
    <div>
        <data-tables :headers="headers" :rows="rows" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data () {
        return {
            headers: [
                { title: 'Name' },
                { title: '&nbsp;' }
            ],
            rows: []
        }
    },
    computed: mapGetters({
        clientLeads: 'clientLeads'
    }),
    watch: {
        clientLeads (val, oldVal) {
            let vm = this
            let rows = []
            val.forEach(function (item) {
                let row = []
                row.push(item.name)
                row.push('<router-link to="/lead_details/' + item.id + '"><a><i class="fa fa-eye"></i></a></router-link>')
                rows.push(row)
            })
            vm.rows = rows
        }
    },
    created () {
        // get leads
        this.$store.dispatch('getClientLeads', {
            status: this.status
        })
    }
}
</script>

但是，生成的 html 是：

<router-link to="/lead_details/123"><a><i class="fa fa-eye"></i></a></router-link>

...而不是：

<a href="/lead_details/123"><i class="fa fa-eye"></i></a>

我了解原因，但无法找到解决我的问题的解决方法。

Answer 1

这里的问题是datatables 在 Vue.js 之外操作 DOM。由于 Vue 不处理由 lib 创建的元素，因此路由器链接组件不会被“解释”。

如果你想继续使用这个datables库，也许你可以尝试添加一个带有#前缀的标准<a>标签：

<a href="#/lead_details/123"><i class="fa fa-eye"></i></a>

当您处于默认模式（哈希模式）时，vue-router 似乎在 url 前加上 # 前缀：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations。或者您可以将模式更改为history：

const router = new VueRouter({
   mode: 'history',
   routes: [...]
 })

去掉#。 当然，它假设您有之前声明的匹配路线。这有点棘手，因为您将像这样绕过 vue-router 并重新加载页面，但它可以工作。

使用 vue，我强烈建议尽可能选择不直接操作 DOM 的首选库，并将此任务交给 Vue。 Vue 组件提供了更多可供调整的选项。 有许多组件库似乎可以完成这项工作，例如： https://vuetifyjs.com/en/components/data-tables 或http://element.eleme.io/#/en-US/component/table