3

我在遗留系统中包含了 VueJS 作为 JQuery 的替代品,但是我在使用插件方面遇到了问题,就像使用 JQuery 一样。举个例子,“vuetable”库表明它可以使用脚本标签直接导入到html中,但我不能让它工作:

我导入脚本

<div id="app">
<vuetable
        api-url="/api/users"
        :fields="columns">
</vuetable>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/vue-table.js"></script>
<script src="js/app.js"></script>

然后,在我的文件 JS 中,我尝试操纵信息。

<script>
    new Vue({
        el: '#app',
        data: {
            columns: [
                'firstname',
                'lastname',
                'nickname',
                'birthdate',
                'group.name_en',
                'gender',
                'last_login',
            ]
        },
methods: {CODE}
    })
</script>

在内部,我通过它获取信息fetch(),然后通过它的 props 将它传递给组件。当我尝试使用 innoces 时,通过其标签调用组件时,我收到一条错误消息,指出未定义 vueetables:app.js Uncaught ReferenceError: Vuetable is not defined

4

1 回答 1

2

我认为所有缺少的只是Vue.use()脚本顶部的几个语句。

另请注意,对于 Vue2 使用vuetable-2

console.clear()
Vue.use(VueResource)
Vue.use(Vuetable)

new Vue({
  el: '#app',
  data: {
    columns: ['name', 'email','birthdate','nickname','gender']
  },
  methods: {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>

<div id="app">
<vuetable ref="vuetable"
  api-url="https://vuetable.ratiw.net/api/users"
  :fields="columns"
  pagination-path="">
</vuetable>
</div>

于 2018-01-30T08:27:22.540 回答