動態變化不會對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輸入工作

回答

相關問題