@sergrib

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

Здравствуйте. Прошу помощи, потому что сам не смог разобраться.
Есть код:
<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, чтобы подтягивались методы из него. Если есть решения, подскажите пожалуйста)
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
У вас 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
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
Ерундой какой-то пытаетесь заниматься. Сделайте разные компоненты и переключайте их.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы