CODEWITHSUNDEEP
laravelvue.js
Valentin Leguy
Valentin Leguy

Reputation: 97

How can add a button count on my component VueJS

i starting learn VueJS and i can't add my button count on my component, i'm work with laravel !

My app.js:

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'


let routes = [
{
    path: '/',
    component: Home
},
];
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
    message: 'Hello Vue'
}
});

Vue.component('button-counter', {
data: function () {
    return {
        count: 0
    }
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});

My HomeComponent.vue:

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card-body">
                <h1 class="card-tite">Bienvenue sur mon site</h1>
                <button-counter></button-counter>
            </div>
        </div>
    </div>
</div>
</template>

I add a div "app" and on this i add a <router-view><router-view> :)

My console VueJS say me : Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Upvotes: 0

Views: 541

Answers (1)

Tommy
Tommy

Reputation: 2453

As told in the error message, you have to register your component, before using it. Have a look on this article to read more about it.

In your example, you have to move the Vue.component('button-counter', { ... }) part in from of your app initialize. It is just another component (similar to your HomeComponent) that is defined.

Change your app.js like this:

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'


let routes = [
  {
    path: '/',
    component: Home
  },
];

Vue.component('button-counter', {
  data: function () {
    return {
        count: 0
    }
  },
  template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});

const app = new Vue({
  mode: 'history',
  el: '#app',
  router: router,
  data: {
    message: 'Hello Vue'
  }
});

... and your example should work properly.

Have a look at this running fiddle with your example.

Upvotes: 0

Related Questions