Pass Vue Variable to Vue Function

Question

I need to pass a VueJS variable to a VueJs function without the page submitting. For some reason the form is still submitting after passing the variable through to the function.

HTML

<div class="list-group-item" v-for="event in events">
    <form method="POST" v-on:submit.prevent="deleteEvent('@{{ event.id }}')")>
        <b><h1>@{{ event.name }}</h1></b>
        <hr>
        <small>@{{ event.description }}</small>
        <hr>
        <b>@{{ event.date }}</b>
        <hr>
        <button class="btn btn-danger form-control">Delete</button>
    </form>
</div>

JavaScript

new Vue({

el: '#app',

data: {
    newEvent: {
        name: '',
        description: '',
        date: ''
    }
},

ready: function(){
    this.retrieveEvents();
},

methods: {

    retrieveEvents: function(){
        this.$http.get('/retrieveEvents', function(response){
            this.$set('events', response);
        });
    },

    addEvent: function(e){
        e.preventDefault();
        var event = this.newEvent;
        this.$http.post('/addEvent', event, function(){
           this.newEvent = {name: '', description: '', date: ''};
        });
        this.retrieveEvents();
    },

    deleteEvent: function(id){
        e.preventDefault();
        console.log(id);
    }

}
});

I don't see why it keeps submitting the form and not passing the variable into VuejJS, everything else works perfectly.

elclanrs · Accepted Answer · 2016-02-24 21:47:02Z

1

You don't need to interpolate in the binding syntax, you can access the properties directly:

<form method="POST" v-on:submit.prevent="deleteEvent(event.id)">

answered Feb 24, 2016 at 21:47

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

Collectives™ on Stack Overflow

Pass Vue Variable to Vue Function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related