Vuejs 中“vue-table-2”组件的“挂载组件失败”错误答案

【问题标题】：'Failed to mount component' error for 'vue-table-2' component in VuejsVuejs 中“vue-table-2”组件的“挂载组件失败”错误
【发布时间】：2023-03-23 17:33:01
【问题描述】：

我是这里的新手，也是 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 -->

【问题讨论】：

你试过在网上搜索“模板或渲染函数未定义”吗？那向你展示了什么？如果您仍然卡住，这些其他参考资料怎么不适用？
您好，感谢您的回答。我当然会搜索它，但我无法从这里集成“汇总”和“webpack”方面； vues.org/v2/guide/…这是我的第一个 Vue.js 项目：
确保您edit 提出您为研究和解决此问题而采取的步骤。

标签： vue.js vue-tables-2

【解决方案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

【讨论】：