VueJS$设置有可变密钥路径

VueJS $set with variable keypath

本文关键字：密钥 路径 设置 VueJS      更新时间：2024-02-24

我目前正在开发一个简单的文件管理器组件，该组件由父组件触发。在文件管理器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，但请记住keypath应该是一个字符串，而不是一个对象。

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

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

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

new Vue({
    el: '#app',
    data() {
      return {
        msg: "hello world",
        attr: {
          lang: {
            zh: '中文',
            en: 'english'
          }
        }
      }
    },
    methods: {
      $set2(obj, propertyName, value) {
        let arr = propertyName.split('.');
        let keyPath = arr.slice(0, -1).join('.');
        let key = arr[arr.length - 1];
        const bailRE = /[^'w.$]/
        function parsePath(obj, path) {
          if (bailRE.test(path)) {
            return
          }
          const segments = path.split('.')
          for (let i = 0; i < segments.length; i++) {
            if (!obj) return
            obj = obj[segments[i]]
          }
          return obj
        }
        let target = parsePath(obj, keyPath);
        // console.log(target, key);
        // target[key] = value;
        this.$set(target, key, value);
      }
    },
    mounted() {
      setTimeout(() => {
        // this.$set('attr.lang.zh', '嗯');
        // this.$set2(this, 'attr.lang.zh', '嗯');
        this.$set2(this.attr, 'lang.zh', '嗯');
      }, 1000);
    }
  })

调用示例：这个$set2（this.attr，'lang.zh'，'嗯');

我也遇到过类似的问题，删除变量-，这些变量nl-NL, de-NL更改为nlNl, deNl我不使用

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

但是

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

然后它工作

相关文章：