Vue.js组件无法正常工作

时间:2016-11-24 15:14:56

标签: javascript html laravel components vue.js

我似乎无法弄清楚如何使组件工作。没有组件它可以正常工作(注释代码)。

这是我的HTML:

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

这是我的Vue.js代码:

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)除非我取消注释注释代码,否则这不起作用。

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

4 个答案:

答案 0 :(得分:3)

您没有为组件定义模板,因此Vue不知道如何渲染组件。

您可以使用内联模板字符串,将其安装到模板标记,或使用单个文件组件 - 使用webpack或browserify。

首先,我建议你阅读文档

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

答案 1 :(得分:1)

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

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

然后,您希望作为此组件的一部分显示的HTML需要位于模板中,内联或其他方式:

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

答案 2 :(得分:1)

如果你觉得它很难看,也许你想要使用单个文件组件。 https://vuejs.org/v2/guide/single-file-components.html

答案 3 :(得分:0)

在对象中出现语法错误,从对象的最后一项中删除逗号,您的代码将正常运行 remove red marked comma