CODEWITHSUNDEEP
javascriptvue.js
ssuhat
ssuhat

Reputation: 7656

Vue passing data become undefined

I'm using Laravel together with Vue.js

I got stuck everytime I click removecart button it always return me undefined.

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

the console.log always return me undefined. As you can see I have AddToCart component and the code similar to RemoveCart, but it working properly.

Any solution?

Upvotes: 0

Views: 677

Answers (1)

ssuhat
ssuhat

Reputation: 7656

Found the culprit at my view:

Instead of 

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

Should be

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

Upvotes: 2

Related Questions