Vuejs中'vue-table-2‘组件的’装载组件失败‘错误

Question

我是新来的，也是Vue.js。

我想试一下'vue-table-2‘，就像这里；(https://jsfiddle.net/matfish2/jfa5t4sm/)，但我不能正确运行它。

“依赖”：{

 "bootstrap3": "^3.3.5",

 "moment": "^2.23.0",

 "vue": "^2.5.21",

 "vue-tables-2": "^1.4.70"

},

控制台错误消息；

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueClientServer>
       <HelloWorld> at src/components/HelloWorld.vue
         <App> at src/App.vue
           <Root>

我的代码；

<template>    
  <div>    
    <h3 class="vue-title">Vue Tables 2 Demo - Client Component</h3>    
    <div id="users">    
<vue-client-server :columns="columns" :data="data" :options="options">
        <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
        <div slot="child_row" slot-scope="props">
          The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
        </div>
      </vue-client-server>
    </div>
    <p class="vue-pagination-ad">
      Like the pagination component and want to use it independently? Try <a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">vue-pagination-2</a>
    </p>
  </div>
</template>
<script>
   import VueClientServer from "vue-tables-2";
  // import {ServerTable, ClientTable, Event} from 'vue-tables-2';
  export default {
    name: "HelloWorld",
    props: {
    },
    components: {
      VueClientServer
   },
    data() {
      return {
        columns: ['name', 'code', 'uri'],
        options: {
          headings: {
            name: 'Country Name',
            code: 'Country Code',
            uri: 'View Record'
          },
          sortable: ['name', 'code'],
          filterable: ['name', 'code']
        },
        data:[{
              code: "ZW",
              name: "Zimbabwe",
              created_at: "2015-04-24T01:46:50.459583",
              updated_at: "2015-04-24T01:46:50.459593",
              uri: "http://api.lobbyfacts.eu/api/1/country/245",
              id: 245
          }],
        }
      },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

Answer 1

你有没有尝试过在全局公开jquery、axios、moment、bootstrap和daterangepicker？

https://www.npmjs.com/package/vue-tables-2#date-columns

您可以在main.js中执行此操作：

import axios from 'axios'
window.axios = axios