代码之家  ›  专栏  ›  技术社区  ›  Jérôme

Vuejs从组件内部的对象生成元素

  •  1
  • Jérôme  · 技术社区  · 6 年前

    我正在尝试创建一个组件,该组件将用Vuex状态呈现VueJs虚拟dom中的元素。

    避免将观察到的数据对象用作vnode数据:{“class”:“btn btn default”} 总是在每次渲染中创建新的vnode数据对象!

    {
      type: 'a',
      config: {
        class: 'btn btn-default',
      },
      nestedElements: [
        {
          type: 'span',
          value: 'test',
        },
        {
          type: 'i',
        },
      ],
    },
    

    我的组件代码看起来像

    methods: {
      iterateThroughObject(object, createElement, isNestedElement = false) {
        const generatedElement = [],
              nestedElements = [];
    
        let parentElementConfig = {};
    
        for (const entry of object) {
          let nodeConfig = {};
    
          if (typeof entry.config !== 'undefined' && isNestedElement) {
            nodeConfig = entry.config;
          } else if (typeof entry.config !== 'undefined') {
            parentElementConfig = entry.config;
          }
    
          if (entry.nestedElements) {
            nestedElements.push(this.iterateThroughObject(entry.nestedElements, createElement, true));
          }
    
          if (!isNestedElement) {
            nodeConfig = parentElementConfig;
          }
    
          generatedElement.push(createElement(
            entry.type,
            nodeConfig === {} ? entry.value : nodeConfig,
            nestedElements
          ));
        }
    
        if (isNestedElement) {
          return generatedElement;
        }
    
        return createElement('ul', generatedElement);
      },
    },
    render(createElement) {
      const barToolsElements = this.$store.state.titleBar.barToolsElements;
    
      if (barToolsElements) {
        return this.iterateThroughObject(barToolsElements, createElement);
      }
    
      return false;
    },
    

    这个错误是在我试图进入最后一个窗口时产生的 generatedElement.push() 定义。 因为 entry.value {"class":"btn btn-default"} .

    我错过或误解了什么吗?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Husam Ibrahim    6 年前

    可能是因为您正在传递对处于存储状态的对象的引用,这可能会无意中导致它们的变异。尝试 creating deep clones 当你传递这些物体的时候,比如。。

    nodeConfig = JSON.parse(JSON.stringify(entry.config));

    parentElementConfig = JSON.parse(JSON.stringify(entry.config)) ;

    nodeConfig === {} ? JSON.parse(JSON.stringify(entry.value)) : nodeConfig,