CODEWITHSUNDEEP
javascriptvue.jsfrontendvue-componentvue-props
Juliette
Juliette

Reputation: 4439

props unable to be reactive in vue template

I have the code below:

var CatShelter = {
    template:
'<vue-multiselect' +
' :options="options">' +
'<template> <i v-on:click="removeCats(option)"></i></span> </template>' +
'</vue-multiselect>' +,
props: {options: Array},
methods: {
removeCats: function (object) {
            self = this;
this.options.pop();
            $.ajax({
                type: "PATCH",
                url: //irrelevant,
                'data': //irrelveant,
                'dataType': 'json',
                success: function (result) {
                    
                },
                error: function (result) {
                }
            });

}
}
}

},

Basically, when the icon is clicked it calls this ajax request which removes an option from vue multiselect through DB. This works fine. When I refresh, the changes occur. I wantto be able to remove the options in real time. The options prop is essentially an array of the objects. How can I get vue to update the prop without refreshing which adjusts the vue multiselect?

**UPDATES **

Here's my real multiselect with your implemented changes.

'<vue-multiselect' +
        ' :options.sync="options"' +
        '<template slot="tag" slot-scope="{ option }"><span class="multiselect__tag"><span><img class="option__image" :src="option.img" width="16px" style="color: #ffffff;" /></span> [[ option.displayName ]] <i aria-hidden="true" tabindex="1" class="multiselect__tag-icon" v-on:click="removeTagAndRelevantTeamMembers(option)"></i></span> </template>' +
        '<template slot="option" slot-scope="{ option }">\n' +
        '      <img class="option__image" :src="option.img" width="16px" />\n' +
        '      <span class="option__desc">\n' +
        '        <span class="option__title">[[ option.displayName ]]</span>\n' +
        '      </span>\n' +
        '    </template>' +
        '</vue-multiselect>' +

Here's my real and implemented js:

 var me = this;
            $.ajax({
                type: "PATCH",
                url: //irrelv,
                'data': //irrelv,
                'dataType': 'json',
                success: function (result) {
                    me.$emit('update:options', updated);
                },
                error: function (result) {
                }
            });

I am still unable to change the values in the multiselect when I press X enter image description here

Upvotes: 0

Views: 339

Answers (1)

Noy Gafni
Noy Gafni

Reputation: 1211

You have a couple of options:

  1. emit the click event to the parent, and call the ajax call in the parent - on success function, remove the item from the options array. this will update the options prop in the child component and update the options reactively

  2. use .sync modifier: use your removeCats function as it is and on success function of ajax call emit: this.$emit('update:options', <copy of the new options value with removed option>). and when you move the prop to the child component from you parent: <child :options.sync="options" .../>. this will update this.options prop and your options will update reactively as well.

you can read more about .sync in vue docs.

Upvotes: 1

Related Questions