Vue.js组件无法正常工作 [英] 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).

这是我的HTML:

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

这是我的Vue.js代码:

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)除非我取消注释代码，否则此方法不起作用.

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

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

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

推荐答案

您需要在HTML标记中包含该组件:

You need to include the component in your HTML markup:

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

然后，要显示为该组件一部分的HTML必须位于模板中，内联或其他形式:

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 }
    },
//

这篇关于Vue.js组件无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！