Question

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

我想使用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

这里的问题是from collections import Counter def printTable(tableData): counter_list = [] for row in tableData: c = Counter({item:len(item) for item in row}) item, item_len = next(iter(c.most_common())) counter_list.append(item_len) print(f'the longest string is: {item}; and its length is {item_len}') print(f'Counter list: {counter_list}')操纵Vue.js之外的DOM。由于Vue不处理lib创建的元素，因此路由器链接组件不会被“解释”。

如果你想继续使用这个数据库，你可以尝试使用#prefixed href添加标准datatables标签：

<a>

当您处于默认模式（哈希模式）时，vue-router似乎在前缀url为＃：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations。或者您可以将模式更改为<a href="#/lead_details/123"><i class="fa fa-eye"></i></a>：

history

摆脱＃。当然，它假设你有先前声明的匹配路线。这是一个小小的调整因为您将绕过这样的vue-router并重新加载页面，但它有效。

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

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

1 个答案: