Vue passing data become undefined

Question

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?

@Alexandru-IonutMihai thanks for the heads up. I tried <a> and <button> to see if its working or not. but apparently its not. I removed the href. — ssuhat
– ssuhat, Commented Mar 9, 2017 at 8:05
I think your method must be like this: removeCart:function(cartId){ console.log(cartId); } — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Mar 9, 2017 at 8:07
@Alexandru-IonutMihai problem solved. the cartId should be cart-id — ssuhat
– ssuhat, Commented Mar 9, 2017 at 8:15

ssuhat · Accepted Answer · 2017-03-09 08:15:11Z

2

Found the culprit at my view:

Instead of

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

Should be

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

answered Mar 9, 2017 at 8:15

ssuhat

7,70621 gold badges68 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue passing data become undefined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related