动态变化不适用于vuejs输入

时间:2017-06-02 12:00:50

标签: vue.js

我正在处理一个vue文件并有一个表单:

<div class="input-group">
    <span class="input-group-addon">Montant</span>
    <input type="number" class="form-control"  v-model="amount" v-bind:value="pattern['value']"]>
</div>

我的标签模式加载如下:

var request = $.ajax({
url: '{{ path ('home') }}promos/pattern/'+value,
})
request.success(function(data){
    if(data['pattern']==='yes'){
        this.pattern=data[0];
        alert(this.pattern['value']);
    }
})

和我的实例:

var instance = new Vue({
el: "#General",
data: {
    [...]
    pattern: []
}

并且请求是evertyime我做的&#39;行动a&#39;。每当我做的时候,我都会得到正确的警报和“我想要的行动”。但输入保持为0并且不会动态变化。

2 个答案:

答案 0 :(得分:1)

三件事:

  1. this处理程序中的success未引用Vue实例。您需要在处理程序范围之外设置引用,并使用该引用。

  2. 首先,您无法将success回调链接到jQuery的ajax方法。它被定义为传递给调用的参数对象中的属性。 (也许你复制了错误的代码?)

  3. 如果您希望输入值反映v-model="amount"

  4. 所限定的值,则需要删除v-bind:value="pattern"

    您的代码应如下所示:

    let self = this; // set a reference to the Vue instance outside the callback scope
    
    var request = $.ajax({
      url: '{{ path ('home') }}promos/pattern/'+value,
      success: function(data) { // success handler should go in the parameter object
        if (data['pattern']==='yes') {
          self.pattern=data[0];
          alert(this.pattern['value']);
        }
      }
    })
    

答案 1 :(得分:1)

您的代码有问题。首先,让我们看一下你的ajax请求:

request.success(function(data){
    if(data['pattern']==='yes'){
        this.pattern=data[0];
        alert(this.pattern['value']);
    }
})

data回复的形式是什么?因为您正在使用data['pattern']检查某些内容,然后您尝试将this.pattern与您调用data[0]的内容关联起来

然后,如@thanksd回答中所述,您在ajax回调中引用了错误的this,您需要创建一个self变量:

var self = this

var request = $.ajax({
    url: '{{ path ('home') }}promos/pattern/'+value,
})

request.success(function(data){
    if(data['pattern']==='yes'){
        self.pattern=data[0];
        alert(this.pattern['value']);
    }
})

最后,你写道:

<input type="number" class="form-control"  v-model="amount" v-bind:value="pattern['value']"]>

所以这里有一些错误。首先,你在行的末尾有一个],这里没有任何关系。

其次,您正在使用v-bind:value,这不是具有响应性的内容。如果您希望此输入具有响应性,则应使用v-model并在要更改输入值时设置amount的值。

希望这有帮助