道具无法在 vue 模板中反应
props unable to be reactive in vue template
我有以下代码:
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 请求,该请求通过数据库从 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 时,我仍然无法更改多选中的值
您有两个选择:
向父级发出点击事件,并在父级中调用 ajax - 函数成功后,从 options
数组中删除该项目。这将更新子组件中的 options
属性并响应地更新选项
使用 .sync
修饰符:按原样使用您的 removeCats
函数,并在 ajax 调用 emit 的成功函数上使用:this.$emit('update:options', <copy of the new options value with removed option>)
。当您将 prop 从父级移动到子组件时:<child :options.sync="options" .../>
。这将更新 this.options 道具,您的选项也会更新。
您可以在 vue docs 中阅读有关 .sync
的更多信息。
我有以下代码:
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 请求,该请求通过数据库从 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 时,我仍然无法更改多选中的值
您有两个选择:
向父级发出点击事件,并在父级中调用 ajax - 函数成功后,从
options
数组中删除该项目。这将更新子组件中的options
属性并响应地更新选项使用
.sync
修饰符:按原样使用您的removeCats
函数,并在 ajax 调用 emit 的成功函数上使用:this.$emit('update:options', <copy of the new options value with removed option>)
。当您将 prop 从父级移动到子组件时:<child :options.sync="options" .../>
。这将更新 this.options 道具,您的选项也会更新。
您可以在 vue docs 中阅读有关 .sync
的更多信息。