laravel Vue.js 组件不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40789789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js component not working
提问by DanVeira
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:
这是我的 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.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) This doesn't work unless I uncomment the commented code.
1）除非我取消注释注释代码，否则这不起作用。
2) JSFiddle: http://jsfiddle.net/tjkbf71h/3/
2）JSFiddle：http: //jsfiddle.net/tjkbf71h/3/
采纳答案by jaredsk
You need to include the component in your HTML markup:
您需要在 HTML 标记中包含该组件：
<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:
然后你想作为这个组件的一部分显示的 HTML 需要在模板中，内联或其他：
Vue.component('my-component', {
template: '<div>Your HTML here</div>',
data: function() {
return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
},
//
回答by Belmin Bedak
You didn't define the template for your component, so Vue doesn't know where and how to render your component.
你没有为你的组件定义模板，所以 Vue 不知道在哪里以及如何渲染你的组件。
You can go with inline template strings, mount it to template tag, or go with Single File Components - with webpack or browserify.
您可以使用内联模板字符串，将其挂载到模板标签，或者使用单个文件组件 - 使用 webpack 或 browserify。
First, I suggest you to read docs
首先，我建议你阅读文档
回答by ichti
Maybe you want to use single file component if you think it's ugly. https://vuejs.org/v2/guide/single-file-components.html
如果您认为它丑陋，也许您想使用单个文件组件。 https://vuejs.org/v2/guide/single-file-components.html
回答by Amir Rahman
its a syntax error in object remove comma from last item of object and your code will run normally
它是对象中的语法错误，从对象的最后一项中删除逗号，您的代码将正常运行
