I googled all day and did not find solution to this problem yet.
I try to build app, where I can insert input with v-model which should be reactive and value of this input must be shown in other div element. What I really need is to have a code where I would be able to insert this input with v-model to any place in my HTML code.
Here is example of my mini app, where everything works well except v-model is not working, because I try to insert it dynamically.
Does anyone know how to make it work?
Here is the code:
<template>
<div>
<div id="content"></div>
<button type="button" @click="createNew('typeOne')">Create Type One</button>
<button type="button" @click="createNew('typeTwo')">Create Type Two</button>
<h3 style="color:#000000;" id="formTypeOne0">formTypeOne0</h3>
<h3 style="color:#000000;" id="formTypeOne1">formTypeOne1</h3>
<h3 style="color:#000000;" id="formTypeTwo0">formTypeTwo0</h3>
<h3 style="color:#000000;" id="formTypeTwo1">formTypeTwo1</h3>
</div>
</template>
<script>
export default {
data () {
return {
formTypeOne0: '',
formTypeOne1: '',
formTypeTwo0: '',
formTypeTwo1: '',
numberTypeOne: 0,
numberTypeTwo: 0
}
},
methods:{
createNew(type) {
if (type === 'typeOne') {
var html = '<input type="text" :value="formTypeOne' + this.numberTypeOne + '" v-model="formTypeOne' + this.numberTypeOne + '">'
document.getElementById('content').insertAdjacentHTML('beforeend', html)
this.numberTypeOne = this.numberTypeOne + 1
} else if (type === 'typeTwo') {
var html2 = '<input type="text" :value="formTypeTwo' + this.numberTypeTwo + '" v-model="formTypeTwo' + this.numberTypeTwo + '">'
document.getElementById('content').insertAdjacentHTML('beforeend', html2)
this.numberTypeTwo = this.numberTypeTwo + 1
}
}
},
watch: {
formTypeOne0: function(val, oldVal) {
document.getElementById('formTypeOne0').innerHTML = val
},
formTypeOne1: function(val, oldVal) {
document.getElementById('formTypeOne1').innerHTML = val
},
formTypeTwo0: function(val, oldVal) {
document.getElementById('formTypeTwo0').innerHTML = val
},
formTypeTwo1: function(val, oldVal) {
document.getElementById('formTypeTwo1').innerHTML = val
}
}
}
Try this code, it worked for me. Here is HTML:
<template>
<div>
<input id='inputId' type="text" v-model="inputModel">
<button type="button" @click="create()">Create</button>
<div id='division'> </div>
</div>
</template>
and here is method:
create () {
document.getElementById('division').appendChild(
document.getElementById('inputId')
)
}
v-model works for me here.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.