Vuejs генерирует элементы из объекта внутри компонентов - PullRequest
Новая
       20

Vuejs генерирует элементы из объекта внутри компонентов

0 голосов
/ 11 октября 2018

Я пытаюсь создать компонент, который будет визуализировать элементы внутри виртуального домена VueJ с состоянием Vuex.

Проблема в том, что я получаю эту ошибку, но не понимаю, почему и как ее исправить

Избегайте использования наблюдаемого объекта данных в качестве данных 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, когда это значение используется только один раз.

Я что-то упустил или неправильно понял

1 Ответ

0 голосов
/ 11 октября 2018

Возможно, вы передаете ссылки на объекты в состоянии вашего магазина, что может непреднамеренно привести к их мутации.Попробуйте создать глубокие клоны этих объектов при их передаче, например, ..

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

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

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

...