vuejs通过元素UI中的el-select维持v-for中的状态

时间:2019-06-27 09:15:21

标签: arrays vue.js html-input v-for element-ui

好吧,我有一个带有字符串语言环境数组('it','en'等)的表单,因此我做了一个简单的v-for,以显示来自{{ 3}}。

(对于谁不知道的el-select进行远程搜索,这有点像是一个选择,它在用户编写时通过api调用从服务器检索值以填充选项列表,因此它以空选项列表开头,每次根据用户输入填写服务器返回的内容。

最初,我的数组只是一个el-select,因此在窗体中显示一个空的[null],但是只要使用一个简单的添加按钮,我就可以el-select对其进行扩展。

列表呈现代码的格式为

array.push(null)

所以我用我的数组索引来维护状态。

到目前为止很好:从<div v-for="(locale, index) in locales" :key="index"> /*...*/ </div> 中选择数据并推送代码时,效果很好。

当我删除一个数组元素但最后一个el-select时出现问题:删除了正确的数组元素,但这就像vue刚删除了array.splice(index,1)的最后一个而不是一个与正确的数组元素有关,因此,从删除的数组元素的索引到最后一个数组的每个选择都具有一个与其选项不匹配的值。

例如:我的数组为el-select,因此我的输入显示为'Italian','French','Spanish','Korean';但是当删除['it','fr','es','ko']->'fr'时,我的选择显示'Italian','es','ko'。

请注意,我的数组包含array[1]个元素,而不包含String个元素,因此文档中的ElementUI并不适用,因为它使用了一个对象。

删除数组元素时如何维护状态?

0 个答案:

没有答案