Vue.js 组件不工作答案

【问题标题】：Vue.js component not workingVue.js 组件不工作
【发布时间】：2017-04-08 22:58:52
【问题描述】：

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

这是我的 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/

【问题讨论】：

标签： javascript html laravel components vue.js

【解决方案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 }
    },
//

【讨论】：

有什么方法可以在不使用模板的情况下实现相同的目标？它看起来很丑陋。谢谢！
单文件组件：vuejs.org/v2/guide/single-file-components.html 虽然正如 Belmin 在他的回答中提到的那样，您必须使用 webpack 或 browserify。
我已经在使用 webpack（与 Laravel Elixir），所以希望它会更容易。谢谢！

【解决方案2】：

你没有为你的组件定义模板，所以 Vue 不知道在哪里以及如何渲染你的组件。

您可以使用内联模板字符串，将其挂载到模板标签，或使用单文件组件 - 使用 webpack 或 browserify。

首先，我建议你阅读文档

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

【讨论】：

我认为这不是问题所在。我不想使用模板，我没有用它，这有效而且我没有使用模板：jsfiddle.net/tjkbf71h/4 所以我只想将它实现到一个组件中。
我不明白这个小提琴有什么用？首先，您没有组件的模板，其次您没有使用您在标记中任何地方注册的组件。您只有具有相同数据的组件和 vue 实例，这就是您看到数据的原因。而且你必须使用它，否则我不知道你是如何让组件工作的。
请更改下拉菜单中的值（曝光和点击）。
你的代码可以工作，但是这里没有组件使用。你的代码可以工作，因为它在 Vue 实例中，所以没有任何与组件的处理。随意删除整个 Vue.component 代码块，您的应用仍将按预期运行。
正如我所说的 - 你必须为你的组件定义模板，这样你就可以像<my-component></my-component>一样在标记中使用它

【解决方案3】：

如果您认为单文件组件很难看，也许您想使用它。 https://vuejs.org/v2/guide/single-file-components.html

【讨论】：

【解决方案4】：

对象中的语法错误从对象的最后一项中删除逗号，您的代码将正常运行

【讨论】：

在使用速记时避免在对象中的最后一项使用逗号，这将导致语法错误，这就是为什么一旦您取消注释注释部分它就可以正常工作，因为注释代码末尾没有逗号