动态变化不会对vuejs输入工作

我工作的VUE文件中，并有一个表格：动态变化不会对vuejs输入工作

<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我做'行动a'。每次我做'行动'时，我都有正确的警报值，但输入保持在0，不会动态改变。

来源

2017-06-02 Sylvain Attoumani

'v-model =“amount”'将您指定的任何值重写为'amount'值。你的'v模型'用法是错误的。 1）你的'金额'设置在哪里？ 2）使用'v-model'或'：value'，而不是两者。 – wostex

@wostex即使我删除v模型也不起作用 –

我猜'pattern'是一个对象。如果属性没有在'data'中定义，你应该使用'this.set（obj，prop，value）'来使它成为被动的：https：//vuejs.org/v2/api/#vm-set如果它没有't帮助 - 提供一个可用的提取虚拟提取等。 – wostex

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

希望这会有帮助

来源

2017-06-02 12:31:45 Hammerbot

从技术上讲，'v-bind：value'会仍然对“模式”属性的变化作出响应。你的意思是对输入值的更改不会更新'pattern'属性。 – thanksd

mmm我不知道，当我在小提琴上测试它时，'value'没有反应：https：//jsfiddle.net/8dvggzhc/除非你摆脱了'v-型' – Hammerbot

是的，没有'v模型'就是我的意思。由于'v-model'只是'v-bind：value =“something”的简写形式，所以v-on：input =“something = $ event.target.value”'，它覆盖了附加的'v-bind'就是他的例子。 – thanksd

三件事：

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

来源

2017-06-02 12:26:28 thanksd

动态变化不会对vuejs输入工作

回答

相关问题