Vue.js: перекомпиляция «на лету» после изменения dom. Как?

Question

[sergrib]

Здравствуйте. Прошу помощи, потому что сам не смог разобраться.
Есть код:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="vue">
  
  <ul id="target">
    <li>
      <a href="#" v-on:click.prevent="alert">Alert method (triggered)</a>
    </li>
  </ul>
  
  <a href="#" v-on:click.prevent="appendElem">Append element</a>
</div>

new Vue({
  el: '#vue',
  methods: {
    alert: function (event) {
      alert("Ok, i`m is triggered )");
      return;
    },
    appendElem: function (event) {
      html = '<li><a href="#" v-on:click.prevent="alert">Alert method (not triggered)</a></li>';
      document.getElementById('target').insertAdjacentHTML('beforeEnd', html);

      // вот тут как-то сказать vue, что нужно закомпилить изменения?
      return;
    },
  }
});

https://jsfiddle.net/tscy839e/

Пробовал юзать компоненту отдельную, но не знаю как ее привязать к существующему объекту Vue, чтобы подтягивались методы из него. Если есть решения, подскажите пожалуйста)

Comments

[Алекс Глебов]

Во вью вся логика шаблона в шаблоне, а в js только работа с данными, dom перестроится сам. Лезти в dom руками вообще нельзя

Answer 1

[Антон Антон]

У вас jquery, головного мозга. Если после первого клика надо поменять сообщение, то надо именно что поменять сообщение после первого клика, как-то так:

<div id="vue">
  <div id="target">
    <a href="#" v-on:click.prevent="alert">{{message}}</a>
  </div>
</div>

new Vue({
  el: '#vue',
  data: {
    message: 'alert 1'
  },
  methods: {
    alert: function (event) {
      alert(this.message);
      this.message = 'alert 2';
    }
  }
});

Ну или объясните задачу по нормальному. Если надо поменять компонент, то надо смотреть на https://ru.vuejs.org/v2/guide/components.html#%D0%... или на https://ru.vuejs.org/v2/guide/conditional.html

Comments

[sergrib]

В методе, я заменяю старый, уже скомпиленный

<a href="#" v-on:click.prevent="alert1">Alert 1</a>

на, пока еще нескомпиленный

<a href="#" v-on:click.prevent="alert2">Alert 2</a>

(в примере метод alert1 на alert2)

Ситуация не только с одним методом, так бы я запоминал куда-то что он нажал и менял исходя из этого в том же методе результат. Меняется полностью структура html, и методы которые в нем используются. Посредством обычной замены html - vue пока не подтягивает события, и я не знаю как его попросить об этом :)

[Roman K]

У вас jquery, головного мозга.

Лучше и не скажешь

[Антон Антон]

sergrib, посяните задачу подробнее. может пример динамического переключения компонентов поможет? или вам вообще нужен vue-router? или рендер-функции? из вопроса ничего не ясно. Для начала надо почитать про компоненты, может быть у него можно просто менять шаблон (поле template) (правда я никогда не пробовал.)

[sergrib]

Антон Антон, https://jsfiddle.net/tscy839e/ на конкретно этом примере нужно заставить работать событие клика после смены шаблона

после изменения DOM

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

Answer 2

[0xD34F]

Ерундой какой-то пытаетесь заниматься. Сделайте разные компоненты и переключайте их.

Если всё-таки неймётся перекомпилировать шаблон - есть Vue.compile.