如何将v模型添加到组件中动态添加的html输入中

Question

我有这个组件，然后，在异步请求之后，我需要创建一个新输入并对其进行v模型出价，这可能吗？

<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>

Answer 1

实际上，您不会使用选择器修改html / template，至少在通常情况下不会如此。使您的异步请求修改组件中的变量。然后使用that变量在模板中渲染内容。

您将获得类似的信息。在这里，我们用一些标签和ID填充fields变量。这些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>