在Laravel Blade模板中显示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
        }
    }

这很好。他们在blade文件中计算了表单值。但是我怎样才能显示总价？

我想在blade文件中显示 '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.

- user3485442

Answer 1

通常您可以使用模板内插实现这个功能。

像这样的代码：{{ form.total }}，在Blade模板中，为了避免使用{{，应该这样写：

<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的功能（而且代码更少，棒极了）：

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>

- acdcjunior

---

我已经尝试过这个。在普通JS中它工作得很好，但是当我在blade中使用它时，它就不起作用了。我使用@符号来绕过blade渲染。 - user3485442

啊，没错。在 Blade 中应该是这样的：<p>总计：@{{ form.total }}</p>。你试过这个了吗？ - acdcjunior

没错。这并不起作用，什么也没有显示出来。我猜测 DOM 没有更新。 - user3485442

是的，您也可以尝试更改分隔符，通过 delimiters: ['!{', '}!'], 并像这样使用 <p>Total is: !{ form.total }!</p>，请参见更新的答案。也许您可以尝试这个来查看问题是否不同。 - acdcjunior

谢谢。我使用 {{ form.total }} 解决了它。我真是太蠢了！感谢评论。 - user3485442

好的，知道了。一点也不傻。有时候只需要第二个人看一眼就可以解决问题。 :D - acdcjunior