Question

我尝试输入值时，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"/>

Answer 1

尝试：

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

Answer 2

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

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

Answer 3

如我所见，您想使用v-html attr更改vue-app模板-我认为这是不可能的。在安装应用程序时，模板会编译为渲染功能，因此您的窍门毫无意义。您可以尝试执行以下操作：

使用字符串或DOM中的隐藏el来构造模板（使用从服务器接收的html）
在您的应用对象中进行设置-template：your_html_template
创建vue应用

V模型绑定到生成的输入文本字段

3 个答案: