javascript - 如何将 v-model 添加到组件中动态添加的 html 输入

Question

我有这个组件，然后，在异步请求之后，我需要创建一个新的输入并给它一个 v-model 出价，这可能吗？

<template>
  <div>
    <div id="newInputsWrapper">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      foo:''
    }
  },
  mounted () {
    //Simulating asynchronous request
    setTimeout(function(){
    document.getElementById('newInputsWrapper').innerHTML = '<input type="text" v-model="hereAnymodel">'
    //....maybe I will need to add more generated inputs...
    },2000);
  }
}
</script>

<style>
</style>

标签： javascriptvue.jsvue-component

Answer 1

在 vue 中，您不会使用选择器修改 html/模板，至少在常见情况下不会。使您的异步请求修改组件中的变量。然后使用你的那个变量在你的模板中渲染东西。

你会得到这样的东西。fields在这里，我们用一些标签和 ID填充变量。id 被映射到我们名为 的表单数据变量form。我们填充它以防止v-model对不存在的变量可能的时髦。我们稍后可以使用我们的form变量来做各种事情。

<template>
  <div>
    <h2>All kind of things</h2>

    <template v-for="field in fields">
      <label :key="field.id">{{ field.label }} <input type="text" v-model="form[field.id]" /></label>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [],
      form: {}
    };
  },

  watch: {
    fields(fields) {
      for (const field of fields) {
        if (this.form[field.id] === undefined) {
          this.$set(this.form, field.id, "");
        }
      }
    },

    form: {
      deep: true,
      handler(newForm) {
        console.log("Looks like our data has been changed!", newForm);
      }
    }
  },

  mounted() {
    //Simulating asynchronous request
    setTimeout(() => {
      this.fields = [
        { id: "a", label: "Label a" },
        { id: "b", label: "Label b" },
        { id: "c", label: "Label c" },
        { id: "d", label: "Label d" }
      ];
    }, 2000);
  }
};
</script>

<style>
label {
  display: block;
}
</style>