0

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

我想在这里尝试'vue-table-2'；（https://jsfiddle.net/matfish2/jfa5t4sm/）但我无法正确运行它。

“依赖项”：{
“bootstrap3”：“^3.3.5”，
“时刻”：“^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 -->
4

1 回答 1

0

您是否尝试过在全球范围内公开 jquery、axios、moment、bootstrap 和 daterangepicker？

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

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

import axios from 'axios'
window.axios = axios
于 2019-02-21T16:17:57.853 回答