V-model 绑定到生成的输入文本字段答案

【问题标题】：V-model binding to generated input text fieldV-model 绑定到生成的输入文本字段
【发布时间】：2019-12-06 19:15:42
【问题描述】：

在我尝试输入值时，在 ajax 请求期间创建的动态 V 模型不会更新

我正在使用 vue2.x 和 axios。我想在用户提交表单时获取在生成的输入中设置的值。我在 ajax 请求期间设法在这个输入上设置了 v-model 我收到此 HTLM 作为响应： <input type="text" value="" v-model="generatedcode">. 但是提交表单后，值仍然是空的。看起来 Vue 忽略了 v-model 指令。我该如何解决？

这是我的代码： VUE

var app = new Vue({
  el: '#subcribtionform',
  data: {
    generatedform:'',
    generatedcode:''
  },
  methods:{
    OnSuccess(response){
        this.generatedform = response.data;
    },
   OnclickSub(){
        axios.post('/submitformURL',{
          lastname: this.lastname,
          generatedcode: this.generatedcode,

        })
  }
created: function () {
    axios.get('/generate_inputURL').then(this.OnSuccess);    
  }

HTML

<div v-html="generatedform"></div>

生成的输入

  <input type="text" value="" v-model="generatedcode"/>

【问题讨论】：

标签： vue.js axios

【解决方案1】：

试试：

created: function () {
    axios.get('/generate_inputURL').then(res => this.OnSuccess(res));    
  }

【讨论】：

【解决方案2】：

组件数据必须是函数而不是对象。您应该会在控制台中看到有关此问题的警告。我猜你的组件不是反应数据，这意味着在请求完成后不会重绘。

data(): {
  return {
    generatedform:'',
    generatedcode:''
  }
}

【讨论】：

是的，但我没有使用组件

【解决方案3】：

如我所见，您想使用 v-html attr 更改 vue-app 模板 - 我认为这是不可能的。在安装应用程序时，模板编译成渲染函数，所以你的技巧没有任何意义。您可以尝试执行以下操作：

将模板（根据需要使用从服务器接收的 html）构造为字符串或 DOM 中的隐藏 el
在您的应用对象中设置它 - 模板：your_html_template
创建 vue 应用

【讨论】：