如何将v-model添加到动态添加到组件中的html输入中
如何将v-model添加到动态添加到组件中的html输入中
提问于 2018-07-18 03:50:18
我有这个组件，那么，在异步请求后，我需要创建一个新的输入，并给它一个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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-18 04:08:11
在vue中，您不需要使用选择器修改html/template，至少在一般情况下不是这样。使您的异步请求修改组件中的一个变量。然后使用您的那个变量在您的模板中呈现内容。
你会得到像这样的东西。在这里，我们用一些标签和ids填充fields变量。ids被映射到名为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51389212
复制相关文章
相似问题
腾讯云开发者
