Javascript VueJS$设置了可变键路径

我目前正在开发一个简单的filemanager组件，它是从父组件触发的。在filemanager中选择介质后，I

$dispatch

一个包含两个键的简单数据对象：元素和介质。我使用元素跟踪我希望媒体附加到当前数据对象的位置，并且媒体具有媒体信息（id、类型、名称等）。当我想

$set

将媒体数据设置为数据对象中的变量时，此设置会给我带来一些麻烦。变量是区域设置，因此：nl-nl、de-nl等等

setMediaForPage : function(data){
    if(!this.page.media[this.selectedLanguage]['id'])
    {   
        // set for all locales
        var obj = this;
        this.application.locales.forEach(function(element, index, array) {
            obj.$set(obj.page.media[element.locale], data.media);
        })
    }
    else 
    {
        // set for 1 locale
        this.$set(this.page.media[this.selectedLanguage], data.media);
    }
}

当我运行此代码时，数据对象会正确显示在Vue Devtools数据对象中，但媒体不会显示在模板中。当我切换语言时（通过更改

this.selectedLanguage

值），媒体确实会显示

---

我认为这与对象键路径中的变量有关，但我不是100%确定。关于如何改进此代码以便在父组件中显示所选媒体而无需更改

this.selectedLanguage

值的任何想法？

我不清楚您的数据结构，但您当然可以在vue中使用变量作为键路径，但是请记住键路径应该是字符串，不是一个物体

如果要在keypath中使用的变量是vue的一部分，则可以这样做：

obj.$set('page.media[element.locale]', data.media)

---

。。。因为作为字符串的keyPath是由Vue的$set方法智能解析的，它当然知道该路径是相对于$data对象的。

我也遇到过类似的问题，删除变量

-

，这些变量

nl-nl，de-nl

更改为

nl，deNl

我不使用

obj.$set('page.media[element.locale]', data.media)

但是

---

然后它工作了

你如何展示媒体？我认为您的问题可能与Vue生命周期更相关，我的意思是将更新媒体的钩子的代码放在钩子中，如果在钩子中进行更新，请将代码本身放在钩子中，以查看您是否试图使用一些未分配或未定义的变量，etcI有一个媒体组件，可以处理音频、视频和图像。我将媒体属性

：media=“media”

发送到检查media.type的组件-并根据该属性呈现媒体。感谢您的回答-我将代码更改为：

console.log（'locale'，element.locale）；对象$set（'page.media[element.locale]”，data.media）var locale=element.locale

并将该变量用作

页面.media[locale]

，然后告诉我您找到了什么

obj.$set('page.media.'+element.locale, data.media);