Почему тот же экземпляр?

Question

[Morfeey]

Сразу скажу то, что на vue сижу прям вот в самом начале, если кидаете камень, киньте вместе примером "как надо".

Итак, имеется небольшая страница, на которой в первой секции отображается json листинг имеющихся логов. Листинг содержит необходимую информацию для дальнейшего "протыкивания" по нему и открытия текущего лога в следующей секции. Сделано это следующим образом:

var listings = new Vue({
  el: '#listings',
  data: {...},
  methods: {
    ItemBlockClick(Item, Version) {
      var SelectorSectionListing = '#listing;
      var file = DirectoryLog + Version + '/logs/' + Item.File;
      var CurrentLog = new Vue({
        el: '#current-log',
        data: {...},
        beforeCreate: function() {},
        mounted: function() {
          $('#listing').toggle(300);
          $('#listing-button').toggle(300);

          Loader.Finish();
        }
      });
    }
  },
  beforeCreate: function() {...},
  mounted: function() {...}
});

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

Answer 1

[0xD34F]

Проблема в том, что после первого тыка не хочет рендерится новый лог, он вроде как подгружается, но страница рендерит "первака".

При каждом вызове ItemBlockClick вы создаёте всё новые и новые экземпляры Vue с использованием одного и того же элемента. Новый экземпляр в качестве шаблона использует результат рендеринга предыдущего - это голый html, там уже нет никаких директив vue. Так что имеющееся содержимое корневого элемента просто создаётся заново, один к одному.

Делайте так: второй экземпляр Vue пусть будет создан изначально, а в ItemBlockClick передавайте ему новые данные. Ну или (что было бы более желательно) попробуйте переписать свой код так, чтобы отображением обоих секций управлял один экземпляр vue.