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'} }
   };
}

我想新生儿元素的绑定将无法工作，因为Vue对这个新元素及其绑定一无所知。

但是也许有某种方法来实现所需的逻辑？

PS，我知道Vue的本质是操纵数据，而不是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/

使用custom directive。

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);
    }
});

Vue：如何将属性动态绑定到新的DOM元素

2 个答案: