在 laravel 刀片模板中显示 vue 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49821656/
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
Display vue component in laravel blade template
提问by Maruf Alom
I am doing a simple calculation in app.js. It just multiplies the product price by quantity. I want to display the total value in laravel, so a user can preview their order.
我在 app.js 中做一个简单的计算。它只是将产品价格乘以数量。我想在 Laravel 中显示总值，以便用户可以预览他们的订单。
app.js
应用程序.js
const app = new Vue({
el: '#item',
data() {
return {
form: {
price: 0,
quantity: 0,
total: 0
}
}
},
methods: {
updatePrice(event) {
this.form.price = event.target.value;
this.form.total = this.form.price * this.form.quantity
},
updateQuantity(event) {
this.form.quantity = event.target.value;
this.form.total = this.form.price * this.form.quantity
}
}
This is fine. They calculate the form value in blade file. But how I can display the total?
这可以。他们计算刀片文件中的表单值。但是我怎么能显示总数呢？
I want to display the 'total' in blade file. How can I access that? When I use @{{ total }}I get this error:
我想total在刀片文件中显示“ ”。我怎样才能访问它？当我使用时，@{{ total }}我收到此错误：
app.js:36519 [Vue warn]: Property or method "total" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
app.js:36519 [Vue 警告]：属性或方法“total”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。
回答by acdcjunior
Typically you would use template interpolationsfor that.
通常，您会为此使用模板插值。
Something like {{ form.total }}, which in a Blade template, to overcome the usage of {{, it would be:
像{{ form.total }}，在 Blade 模板中，为了克服 的使用{{，它将是：
<div id="item">
<p>Total is: @{{ form.total }}</p>
</div>
Alternatively, you can change Vue's delimitersand workaround this issue. For example (delimiters: ['!{', '}!'],):
或者，您可以更改 Vue 的分隔符并解决此问题。例如（delimiters: ['!{', '}!'],）：
const app = new Vue({
el: '#item',
delimiters: ['!{', '}!'],
data() {
return {
form: {
price: 1,
quantity: 1,
total: 1
}
}
},
methods: {
updatePrice(event) {
this.form.price = event.target.value;
this.form.total = this.form.price * this.form.quantity
},
updateQuantity(event) {
this.form.quantity = event.target.value;
this.form.total = this.form.price * this.form.quantity
}
}
});<script src="https://unpkg.com/vue"></script>
<div id="item">
<p>Total is: !{ form.total }!</p>
price: <input @input="updatePrice"><br>
quantity: <input @input="updateQuantity"><br>
</div>Although that would work, in your case, instead of handling events directly, I suggest using v-modelin priceand quantityand creating totalas a computed property. This would be an approach that better uses Vue's capabilities (and is less code, yay):
虽然这工作，你的情况，而不是直接处理事件，我建议使用v-model在price与quantity和创造total的计算性能。这将是一种更好地利用 Vue 功能的方法（并且代码更少，是的）：
const app = new Vue({
el: '#item',
data() {
return {
form: {
price: 1,
quantity: 1,
total: 1
}
}
},
computed: {
total() {
return this.form.price * this.form.quantity
}
}
});<script src="https://unpkg.com/vue"></script>
<div id="item">
<p>Total is: {{ total }}</p>
price: <input v-model="form.price"><br>
quantity: <input v-model="form.quantity"><br>
</div>