Vue传递数据变得不确定

时间:2017-03-09 08:03:47

标签: javascript vue.js

我将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的代码,但它运行正常。

任何解决方案?

1 个答案:

答案 0 :(得分:2)

在我看来发现了罪魁祸首:

而不是

<RemoveCart :cartId="{{ $cart->id }}"></RemoveCart>

应该是

<RemoveCart :cart-id="{{ $cart->id }}"></RemoveCart>