在 Vue.js 中反应性地重新填充指令数组

Posted 2023-02-16

【中文标题】在 Vue.js 中反应性地重新填充指令数组

【英文标题】：re-populate a directive array reactively in Vue.js

【发布时间】：2021-07-10 09:24:12

【问题描述】：

我在 data() 中定义了一个数组，该数组通过其绑定挂钩中的自定义指令填充，如下所示：

import Vue from 'vue'
export default 
el: '#showingFilters',
name: "Filters",
data() 
    return 
        country: '' // v-modelled to a <select>
        states: [],
    
,
directives: 
    arraysetter: 
        bind: function(el, binding, vnode) 
            vnode.context[binding.arg] = Object.keys(el.options).map(op => el.options[op].value);
        ,
    ,
,
methods: 
    countryChangeHandler() 
        this.states.splice(0)
        fetch(`/scripts/statejson.php?country=$this.country`)
            .then(response => response.json())
            .then(res => 
                res.states.forEach( (element,i) => 
                    Vue.set(this.states, i, element.urlid)
                );
            )
    ,

当我想在countryChangeHandler() 方法中重新填充states 数组时，问题就开始了（当国家选择标签发生@change 时）。 我先使用splice(0) 使数组为空，然后我使用Vue.set 使重新填充反应，但Vue 仍然不知道！该数组具有正确的元素！我只是不知道如何使这个反应。

PS：我在没有 forEach 的情况下搜索过，但 $set 需要索引。

如果有任何帮助，我将不胜感激。

【问题讨论】：

不太确定使用自定义指令的动机是什么，因为您只显示了部分代码。除非您真的需要自定义指令，否则请尝试更新 this.states = res.states。然后，您可以将“地图”功能移动到计算属性。如果你没有得到解决，在某个时候考虑创建一个 CodeSandbox。

并非所有国家都有州

【参考方案1】：

此解决方案应该有效并保持反应性。

您应该能够在不使用splice 或set 的情况下替换整个数组。

我使用闭包来捕获 this，因为有时 fetch 调用会干扰 this 引用，即使在 lambda 表达式中也是如此。

countryChangeHandler() 
        this.states = []
        const that = this
        fetch(`/scripts/statejson.php?country=$this.country`)
            .then(response => response.json())
            .then(res => 
                that.states = res.states.map(it=>it.urlid)              
            )
    ,