Question

我正在处理一个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并且不会动态变化。

Answer 1

三件事：

this处理程序中的success未引用Vue实例。您需要在处理程序范围之外设置引用，并使用该引用。
首先，您无法将success回调链接到jQuery的ajax方法。它被定义为传递给调用的参数对象中的属性。（也许你复制了错误的代码？）
如果您希望输入值反映v-model="amount"

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']);
    }
  }
})

Answer 2

您的代码有问题。首先，让我们看一下你的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的值。

希望这有帮助

动态变化不适用于vuejs输入

2 个答案: