道具无法在 vue 模板中反应

Posted 2023-02-23

【中文标题】道具无法在 vue 模板中反应

【英文标题】：props unable to be reactive in vue template

【发布时间】：2021-07-17 18:04:54

【问题描述】：

我有以下代码：

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"  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"  />\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 时，我仍然无法更改多选中的值

【参考方案1】：

你有几个选择：

向父级发出点击事件，并在父级中调用ajax调用-成功时，从options数组中删除该项。这将更新子组件中的 options 属性并响应式更新选项

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

您可以在vue docs 中阅读有关.sync 的更多信息。

【讨论】：

嘿，你介意看看我的更新。我非常感谢您的帮助。我真的需要这个。

我的意思是你在 CatShelter 的父组件上使用 .sync。如果您的选项列表与您的多选位于同一组件中，则只需从中删除该项目。我的答案是，当您将选项列表作为道具时 - 您不能从子组件中改变道具