我将Laravel与Vue.js一起使用
每次点击removecart
按钮时我都会被卡住,它总是让我不确定。
app.js
Vue.component('addtocart', require('./components/AddToCart.vue'));
Vue.component('removecart', require('./components/RemoveCart.vue'));
new Vue({
el: '#app'
});
RemoveCart.vue
<template>
<div class="cart-box-item-actions">
<button @click="removeCart(cartId)" class="button dark-light rmv">
<!-- SVG PLUS -->
<svg class="svg-plus">
<use xlink:href="#svg-plus"></use>
</svg>
<!-- /SVG PLUS -->
</button>
</div>
</template>
<script>
import {BASE_URL} from '../bootstrap';
export default{
props: ['cartId'],
methods: {
removeCart(cartId){
console.log(cartId);
}
}
}
</script>
cart.blade.php
//Stuffed
<RemoveCart :cartId="{{ $cart->id }}"></RemoveCart>
// Other stuffed
console.log总是返回undefined。正如您所看到的,我有AddToCart组件和类似于RemoveCart的代码,但它运行正常。
任何解决方案?
答案 0 :(得分:2)
在我看来发现了罪魁祸首:
而不是
<RemoveCart :cartId="{{ $cart->id }}"></RemoveCart>
应该是
<RemoveCart :cart-id="{{ $cart->id }}"></RemoveCart>