Ошибка «Смонтировать компонент» для компонента «vue-table-2» в Vuejs - PullRequest
Новая
       13

Ошибка «Смонтировать компонент» для компонента «vue-table-2» в Vuejs

0 голосов
/ 21 января 2019

Я новичок здесь, а также 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 -->

1 Ответ

0 голосов
/ 21 февраля 2019

Вы пытались выставить jquery, axios, moment, bootstrap & daterangepicker глобально?

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

Вы можете сделать это в main.js: 

import axios from 'axios'
window.axios = axios
...