Javascript 如何将v-model添加到html输入中

我有这个组件，然后，在一个异步请求之后，我需要创建一个新的输入，并给它一个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>

导出默认值{
数据（）{
返回{
foo:“”
}
},
挂载（）{
//模拟异步请求
setTimeout（函数（）{
document.getElementById（'newInputsRapper'）。innerHTML=''
//…也许我需要添加更多生成的输入。。。
},2000);
}
}

在vue中，您不会使用选择器修改html/模板，至少在常见情况下不会。使异步请求修改组件中的变量。然后使用该变量在模板中呈现内容

你会得到这样的东西。这里我们用一些标签和ID填充

字段

变量。ID映射到名为

form

的表单数据变量。我们填充它是为了防止对不存在的变量进行可能的

v-model

funky。我们可以稍后使用

表单

变量来执行所有类型的操作

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

诸如此类
{{field.label}
导出默认值{
数据（）{
返回{
字段：[]，
表格：{}
};
},
观察：{
字段（字段）{
for（字段的常量字段）{
if（this.form[field.id]==未定义）{
this.$set（this.form，field.id，“”）；
}
}
},
表格：{
深：是的，
处理程序（newForm）{
log（“看起来我们的数据已经更改了！”，newForm）；
}
}
},
安装的（）{
//模拟异步请求
设置超时（（）=>{
此字段=[
{id:“a”，label:“label a”}，
{id:“b”，label:“label b”}，
{id:“c”，label:“label c”}，
{id:“d”，label:“label d”}
];
}, 2000);
}
};
标签{
显示：块；
}

---

在模板中编写输入元素，隐藏在由asyc请求控制的v-if=“asyncDone”中？问题是，我不知道需要添加多少输入，因此，我想为几个生成的输入提供v-model。我在添加错误时做了一些更改。我还添加了一个观察者，这样您就可以看到数据是如何变化的。除了调试日志之外，您并不真正需要它。