Vue.js component not working

Question

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:

<strong>Total Price:</strong> <span v-text="total"></span><br>
<strong>CPC:</strong> <span v-text="cpc"></span>

Here's my Vue.js code:

Vue.component('my-component', {
    // data: function() {
    //     return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
    // },
    computed: {
        total: function () {
            return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
        },
        cpc: function () {
            return((this.total) / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)
        }
    }
});

const app = new Vue({
    el: '#app',
    data: {
        interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0
    },
    // computed: {
    //     total: function () {
    //         return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
    //     },
    //     cpc: function () {
    //         return((this.total) / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)
    //     }
    // }
});

1) This doesn't work unless I uncomment the commented code.

2) JSFiddle: http://jsfiddle.net/tjkbf71h/3/

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

Comments

[DanVeira]

I don't think that's the problem. I don't want to use a template, I have no use for it, and this works and I'm not using a template: jsfiddle.net/tjkbf71h/4 So I just want to implement this into a component.

[Belmin Bedak]

I don't understand what works on this fiddle ? First you don't have template for component, second you don't use this component that you registered anywhere in markup.You just have component and vue instance with same data, and that's why you see data. And you have to use it, otherwise I don't know how you think to make component to work.

[DanVeira]

Please change the values on the dropdowns (exposure and clicks).

[Belmin Bedak]

Your code is working, but there are no component usage here.Your code is working because it's inside Vue instance, so there are no any deal with components. Feel free to remove whole Vue.component code block and your app would still work as expected.

[DanVeira]

I know. My goal here is to take it from there and implement it into a component but I can't get it to work.

[Belmin Bedak]

As I said you - you have to define template for your component, so then you can use it in markup just like a <my-component></my-component>

[DanVeira]

OHHHHHHHH Now I get it! The other answer from @jaredsk made it clear as day! Thanks m8!

[DanVeira]

Is there any way I can achieve the same thing without having to use templates? It looks so ugly. Thanks!

[jaredsk]

Single-file components: vuejs.org/v2/guide/single-file-components.html Although, as Belmin mentioned in his answer, you'd then have to use webpack or browserify.

[DanVeira]

I'm already using webpack (with Laravel Elixir) so hopefully it will be easier. Thanks!

[Amir Rahman]

avoid using comma for last item in object when using shorthands this will cause syntax error thats why as soon you uncomment commented part it works normally because that commented code have no comma at the end