在laravel刀片模板中显示vue组件

Question

我在app.js做一个简单的计算.它只是将产品价格乘以数量.我想在laravel中显示总值,因此用户可以预览他们的订单.

app.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
        }
    }

这可以.他们计算刀片文件中的表单值.但我怎么能显示总数呢？

我想total在刀片文件中显示' '.我该如何访问？当我使用时,@{{ total }}我收到此错误:

app.js:36519 [Vue warn]:属性或方法"total"未在实例上定义,但在渲染期间引用.通过初始化属性,确保此属性在数据选项或基于类的组件中是被动的.

Answer 1

通常,您会使用模板插值.

喜欢的东西{{ form.total }},这在刀片模板,要克服的使用{{,这将是:

<div id="item">
  <p>Total is: @{{ form.total }}</p>
</div>

或者,您可以更改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>

虽然这工作,你的情况,而不是直接处理事件,我建议使用v-model在price与quantity和创造total的计算性能.这将是一种更好地使用Vue功能的方法(并且代码更少,yay):

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>