vue.js 动态添加输入 v-model 不起作用答案

【问题标题】：vue.js dynamically added input v-model does not workvue.js 动态添加输入 v-model 不起作用
【发布时间】：2019-03-16 14:21:55
【问题描述】：

我google了一整天，还没有找到解决这个问题的方法。

我尝试构建应用程序，我可以在其中使用 v-model 插入输入，该输入应该是反应性的，并且此输入的值必须显示在其他 div 元素中。我真正需要的是有一个代码，我可以使用 v-model 将此输入插入到我的 HTML 代码中的任何位置。

这是我的迷你应用程序的示例，除了 v-model 不工作之外，一切都运行良好，因为我尝试动态插入它。

有人知道如何让它工作吗？

代码如下：

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

}

【问题讨论】：

你用过v-html吗？
而不是 v-model？没有区别

标签： javascript vue.js input v-model

【解决方案1】：

试试这个代码，它对我有用。这是 HTML：

<template>
<div>
<input id='inputId' type="text" v-model="inputModel">
<button type="button" @click="create()">Create</button>
<div id='division'>  </div>
</div>
</template>

这里是方法：

  create () {
    document.getElementById('division').appendChild(
      document.getElementById('inputId')
    )
  }

v-model 在这里适合我。

【讨论】：