bugfix> vue.js > 投稿

何が間違っているのかわかりません。次のエラーが表示されます。

コンソールのエラーメッセージ:

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueChartjs>
       <Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
         <App> at src\App.vue
           <Root>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      // component: HelloWorld
      component: require('../components/HelloWorld.vue').default
    }
  ]
})

App.vue

<template>
  <div id="app" class="container">
    <img src="./assets/logo.png" class="logo">
    <!-- chartjs -->
    <div class="chartjsvue">
      <Chatjsvue></Chatjsvue>
    </div>
    <div class="clear"></div>
    <!-- chartjs -->
  </div>
</template>
<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'
export default {
  name: 'App',
  components: {
    Chatjsvue
  }
}
</script>

Chatjsvue.vue

<template src="../../views/chartjshtml/chartsjs.html"></template>
<script>
  import Chartjsvue from '@/assets/javascripts/chartjs'
  export default {
    components: {
      'vue-chartjs': Chartjsvue 
    }
  };
</script>

chartsjs.html

<div class="wrapper">
  <vue-chartjs></vue-chartjs>
</div>

chartjs.js

file is rmpty- no code in the file

エラーは何を指し、それを解決するために何をする必要がありますか?

回答 3 件
  • 問題はあなたの chartjs.js だと思う  空です。あなたがする必要があります:

    import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
    export default {
      template: template
    }
    
    

  • chartjs.jsファイルは空にしないでください。レンダリング可能なテンプレートを備えたVueコンポーネントである必要があります。スクリプトタグ内に任意のJavaScriptを記述できます。

    componentsオブジェクトには、現在のコンポーネントで使用する必要があるvueコンポーネントのリストのみを含める必要があります。また、各コンポーネントにはテンプレートが必要です。

  • 回答に貢献してくれたすべての人に感謝します。 jsファイルは空にしないでください。これは、chartjsのすべてのグラフを表示する完全なコードです

    main.js [src/main.js]

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'
    Vue.config.productionTip = false
    require('./assets/stylesheets/application.css')
    require('./assets/javascripts/application.js')
    require('./assets/javascripts/chartjs.js')
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { 
        App,
        ChartJsPluginDataLabels
      },
      template: '<App/>'
    })
    
    

    App.vue [src/App.vue]

    <template>
      <div id="app" class="container">
        <!-- chartjs -->
        <div class="chartjsvue tab-content active" id="tab2">
          <Chatjsvue></Chatjsvue>
        </div>
        <div class="clear"></div>
        <!-- chartjs -->
      </div>
    </template>
    <script>
    import Chatjsvue from '@/components/vueChartjs/Chatjsvue'
    export default {
      name: 'App',
      components: {
        Chatjsvue
      }
    }
    </script>
    
    

    Chatjsvue.vue [src/components/Chatjsvue.vue]

    <template src="../../views/chartjshtml/chartsjs.html"></template>
    <script>
      import Chartjsbarvue from '@/assets/javascripts/chartjsbar'
      export default {
        components: {
          'vue-chartbarjs': Chartjsbarvue   
        },
        mounted(){
          console.log('Data is chartjs',this)
        },
        methods: {},
      }
    </script>
    
    

    chartsjs.html [src/views/chartjshtml/chartsjs.html]

    <div class="wrapper">
      <div class="chart_header">chartjs bar chart</div>
      <vue-chartbarjs></vue-chartbarjs>
    </div>
    
    

    chartjsbar.js [src/assets/javascripts/chartjsbar.js]

    /*===================================================
        File: Chartsjsvue.vue
      ===================================================*/
    import { Bar } from 'vue-chartjs'
    export default {
      extends: Bar,
      data () {
        return {
          datacollection: {
            labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
            datasets: [
              {
                label: '1st Dataset hello',
                backgroundColor: 'rgba(52,65,84, 0.3)',
                bordercolor: '#344154"',
                hoverBackgroundColor: "#344154",
                data: [40, 20, 12, 39]
              },
              {
                label: '2nd Dataset',
                backgroundColor: 'rgba(130,191,163, 0.5)',
                bordercolor: '#82BFA3"',
                hoverBackgroundColor: "#82BFA3",
                data: [50, 70, 22, 55]
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              datalabels: {
                display: false
              }
            }
          }
        }
      },
      mounted () {
        this.renderChart(this.datacollection, this.options)
      }
    }
    
    

あなたの答え