道具无法在 vue 模板中反应

Question

我有以下代码：

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) {
                }
            });

}
}
}

},

基本上，当单击该图标时，它会调用此 ajax 请求，该请求通过 DB 从 vue 多选中删除一个选项。 这工作正常。 当我刷新时，会发生变化。 我希望能够实时删除选项。 options 属性本质上是一个对象数组。 如何让 vue 在不刷新调整 vue 多选的情况下更新道具？

**更新 **

这是我真正的多选与您实施的更改。

'<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>' +

这是我的真实和实现的js：

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

当我按 X 时，我仍然无法更改多选中的值

Answer 1

你有几个选择：

1. 向父级发出点击事件，并在父级中调用 ajax 调用 - 在成功 function 时，从options数组中删除该项目。 这将更新子组件中的options道具并反应性地更新选项

2. 使用.sync修饰符：按原样使用您的removeCats function 并成功使用 ajax 的 function 调用发射： this.$emit('update:options', <copy of the new options value with removed option>) 并且当您将道具从父组件移至子组件时： <child:options.sync="options".../> 。 这将更新 this.options 道具，您的选项也将响应更新。

您可以在vue 文档中阅读更多关于.sync的信息。