Vue.js Component Not Working

I can't seem to figure out how to make components work. Without the component it works fine (the commented code). Here's my HTML: Total Price:

Solution 1:

You need to include the component in your HTML markup:

<div id="app">
    <my-component></my-component>
</div>

And then the HTML you want displayed as part of this component needs to be in a template, inline or otherwise:

Vue.component('my-component', {
    template: '<div>Your HTML here</div>',
    data: function() {
         return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
    },
//

Solution 2:

You didn't define the template for your component, so Vue doesn't know where and how to render your component.

You can go with inline template strings, mount it to template tag, or go with Single File Components - with webpack or browserify.

First, I suggest you to read docs

https://vuejs.org/v2/guide/components.html

Solution 3:

Maybe you want to use single file component if you think it's ugly. https://vuejs.org/v2/guide/single-file-components.html

Solution 4:

its a syntax error in object remove comma from last item of object and your code will run normally

Share