vue.js - 将 v-model 附加到 Vue.js 中使用 .appendChild 添加的动态元素

Question

我正在使用一个没有 Vue.js 包装器的库。
该库以动态方式在 DOM 中添加元素。

我希望能够绑定(bind) v-model使用 Vue 将这些元素归因于这些元素，并且一旦附加到我的模型中就可以使用它们。

我过去曾使用其他响应式(Reactive)框架(例如 Knockout.js)完成此操作，但我找不到使用 vue.js 完成此操作的方法。

这样做有报酬吗？
它应该是我假设的以下几行中的一些内容:

var div = document.createElement('div');
div.setAttribute('v-model', '{{demo}}');
[VUE CALL] //tell vue.js I want to use this element in my model.

document.body.appendChild(div);

Answer 1

您可以为您的库创建一个包装组件，然后设置自定义 v-model在它上面得到你正在寻找的结果。由于您的库负责操作 DOM，因此您必须 Hook 库提供的事件以确保您的模型保持最新。您可以拥有 v-model通过确保两件事来支持您的组件:

它接受 value Prop

它发出 input事件

这是一个做类似事情的例子: https://codesandbox.io/s/listjs-jquery-wrapper-sdli1和我实现的包装器组件的截图:

<template>
  <div>
    <div ref="listEl">
      <ul ref="listUlEl" class="list"></ul>
    </div>
    <div class="form">
      <div v-for="variable in variables" :key="variable">
        {{ variable }}
        <input v-model="form[variable]" placeholder="Enter a value">
      </div>
      <button @click="add()">Add</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value", "variables", "template"],

  data() {
    return {
      form: {}
    };
  },

  mounted() {
    this.list = new List(
      this.$refs.listEl,
      {
        valueNames: this.variables,
        item: this.template
      },
      this.value
    );

    this.createFormModels();
  },

  methods: {
    createFormModels() {
      for (const variable of this.variables) {
        this.$set(this.form, variable, "");
      }
    },

    add() {
      this.$emit("input", [
        ...this.value,
        {
          id: this.value.slice(-1)[0].id + 1,
          ...this.form
        }
      ]);
    }
  },

  watch: {
    value: {
      deep: true,
      handler() {
        this.$refs.listUlEl.innerHTML = "";

        this.list = new List(
          this.$refs.listEl,
          {
            valueNames: this.variables,
            item: this.template
          },
          this.value
        );
      }
    }
  },

  beforeDestroy() {
    // Do cleanup, eg:
    // this.list.destroy();
  }
};
</script>

关键点:

在 mounted() 上初始化自定义库为了创建DOM。如果它需要使用一个元素，请通过 <template> 提供一个。并放一个 ref在上面。这也是在您的库上设置事件监听器的地方，以便您可以通过 $emit('value', newListOfStuff) 触发模型更新.

watch更改 value prop 以便您可以重新初始化库，或者如果它提供了更新其集合的方法，请改用它。如果库提供支持并取消绑定(bind)事件处理程序，请确保清除先前的实例。

在 beforeDestroy 中调用任何清理操作、事件处理程序删除.

进一步引用:

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components