vue.js dynamically added input v-model does not work

Question

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

}

Have you used v-html?

ssb
– ssb

2018-10-11 13:27:36 +00:00
Commented Oct 11, 2018 at 13:27 — ssb
– ssb, Commented Oct 11, 2018 at 13:27
instead of v-model? It doesn't make difference

Lauris Macke
– Lauris Macke

2018-10-11 13:33:39 +00:00
Commented Oct 11, 2018 at 13:33 — Lauris Macke
– Lauris Macke, Commented Oct 11, 2018 at 13:33

Tomas Maksimavicius · Accepted Answer · 2018-10-11 19:37:38Z

1

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.

answered Oct 11, 2018 at 19:37

Tomas Maksimavicius

4245 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js dynamically added input v-model does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related