时间戳

首页 > 解决方案 > Vuejs 从组件内部的对象生成元素

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

问题描述

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

问题是我收到此错误，但我不明白为什么以及如何解决它

避免将观察到的数据对象用作 vnode 数据：{"class":"btn btn-default"} 始终在每次渲染中创建新的 vnode 数据对象！

在我的 Vuex 状态中，我存储和定义元素属性的对象

{
  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"}。

我不明白为什么它告诉我重新创建一个新的 Vnode 对象，而这个值只使用一次。

我错过或误解了什么吗？

标签： javascriptvue.jsvuejs2vue-componentvirtual-dom

解决方案

可能是因为您正在传递对商店状态中对象的引用，这可能会无意中导致它们的突变。当您传递这些对象时，请尝试创建这些对象的深层克隆，例如 ..

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

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

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

推荐阅读