Vue: Как динамически привязать свойство к новому элементу DOM

Question

Скажем, у меня есть компонент со следующим шаблоном:

<div id="root"></div>

Затем я каким-то образом вызываю код, который добавляет к нему новый элемент (сейчас используется jQuery):

$('#root').append('<div id="a1" v-bind:styles="styles.a1"></div>')

где "styles.a1" это просто объект из данных компонента:

data() {
   return {
      styles: { a1: {color: 'red'} }
   };
}

Полагаю, привязка новорожденного элемента не будет работать, потому что Вью ничего не знает об этом новом элементе и его привязке.

Но, может быть, есть какой-то способ реализовать желаемую логику?

PS Я знаю, что природа Вью заключается в манипулировании данными, а не в DOM, но здесь есть ситуация, с которой мне приходится иметь дело.

Answer 1

Вы можете сначала связать стиль без значения,

data() {
   return {
      styles: { a1: '' }
   };
}

тогда вы можете добавить в него данные из события через обычный JS. (JQuery здесь даже не нужен).

methods: {
   quack() {
        this.styles.a1 = { color: red }
    }
}

Редактировать: я понял неправильно. Кажется, Vue не обнаруживает вновь добавленные элементы после монтирования. Таким образом, вы можете подключить экземпляр Vue после добавления добавленных элементов или выполнить повторную визуализацию всего экземпляра с помощью forceUpdate. (Последний будет повторно визуализировать весь экземпляр, поэтому я рекомендую разбить его на несколько экземпляров Vue для повышения производительности)

ForceUpdate

Answer 2

Если вы используете компоненты Vue, вам не следует манипулировать DOM.

• Вы должны использовать шаблонную логику для этого.

     <template v-if="someCondition">
         <div id="a1" v-bind:styles="styles.a1"></div>
     </template>
  

• Обернуть не Vue-код в собственный компонент Vue.

  Vue.component('date-picker', {
    template: '<input/>',
    mounted: function() {
      $(this.$el).datepicker();
    },
    beforeDestroy: function() {
      $(this.$el).datepicker('hide').datepicker('destroy');
    }
  });
  

  https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

• Используйте пользовательскую директиву .

  Vue.directive('demo', {
      bind: function () {
          $(this.el).css({color:'#fff', backgroundColor:this.arg});
      },
      update: function (value) {
          $(this.el).html(
              'argument - ' + this.arg + '!<br>' +
              'key - ' + this.key + '<br>' +
              'value - ' + value);
      }
  });