Question

我是vue.js的新手，我不确定为什么我收到以下错误 - 您的帮助将不胜感激。我认为问题可能在ChartkickCharts.vue文件中但不确定 - 您的建议会非常有用

我得到的错误：

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

found in

---> <ChartkickCharts> at src\components\vueChartkick\ChartkickCharts.vue
       <App> at src\App.vue
         <Root>

App.vue

<template>
  <div id="app" class="container">

    <!-- chartkicks charts -->
    <div class="chartkickcharts">
      <ChartkickCharts></ChartkickCharts>
    </div>
    <!-- chartkicks charts -->

  </div>
</template>


<script>
import ChartkickCharts from '@/components/vueChartkick/ChartkickCharts'
export default {
  name: 'App',
  components: {
    ChartkickCharts
  }
}
</script>

ChartkickCharts.vue [components / vueChartkick / ChartkickCharts.vue]

<template src="../../views/chartkickhtml/chartkickcharts.html"></template>

<script>
    import ChartkickCharts from '@/assets/javascripts/chartkick'

    export default {
    components: {
      'line-chart': ChartkickCharts 
    },
    mixins:[ChartkickCharts],
      mounted(){
        console.log('Data is chartkick',this)
        },
  }
</script>

chartkickcharts.html [views / chartkickhtml / chartkickcharts.html]

<div class="wrapper">
  <div class="chart_header">chartkick line chart</div>
  <line-chart :data="chartData"></line-chart>
</div>

chartkick.js [assets / javascripts / chartkick.js]

import VueChartkick from 'vue-chartkick'

export default {
  components: {
    VueChartkick
  },

  data() {
    return {
      chartData: [
          ["Jan", 4], 
          ["Feb", 2], 
          ["Mar", 10], 
          ["Apr", 5], 
          ["May", 3]
        ],
      chartOptions: {
        chart: {
          title: 'Company Performance'
        }
      }
    }
  },
  mounted() {
    //this.datacollection
  }
}

Answer 1

导入chartkick.js并将其用作Vue组件

components: {
  'line-chart': ChartkickCharts 
}

但在chartkick.js中没有模板。您可以尝试删除上面的组件声明，我认为它会没问题。

Vue.js Chartkick - 无法安装组件：模板或渲染函数未定义

1 个答案: