如何從jQuery AJAX調用中更新VueJS實例的數據？

我有一個VueJS實例與一些數據：如何從jQuery AJAX調用中更新VueJS實例的數據？

var vm = new Vue({ 
    el: '#root', 
    data: { 
     id: '', 
     name: { 
      firstname: "", 
      lastname: "", 
      country: "", 
      valueset: false 
     }, 
// ...

在我的HTML，我也有：

<input class="id" type="text" size="4" maxlength="4" v-model.lazy="id" v-on:change="create_casenr">

因此填補了這一領域之後，我的方法實例的create_casenr被觸發。

create_casenr: function(event) { 
    // update the full name of user 
    $.ajax({ 
     url: 'http://elk.example.com:9200/users/user/' + this.id 
    }) 
    .done(function(data) { 
     console.log(data); 
     this.name = data._source; 
     this.name.valueset = true; 
     console.log(this.name); 
    }) 
// ...

發生什麼事是：

create_casenr是在該領域（OK）
AJAX調用經過成功的改變叫，我看到控制檯上都預期輸出data和this.name（OK）
但name在VueJS實例中未更新。

我可以看到它沒有更新，因爲我的代碼依賴它的其他部分沒有看到它;我還檢查了VueJS Chrome附加組件，並且所有變量均已正確設置（包括id），但name除外。

有沒有一種特定的方式來處理通過jQuery AJAX調用修改的VueJS實例的數據？

來源

2016-10-24 WoJ

在您的AJAX成功處理程序中，您的範圍問題爲this.name。

this.name裏面和你的Vue組件中的this.name不一樣。所以你的名字沒有被設置在Vue組件中。

您可以使用箭頭功能來解決這個問題：

$.ajax({ 
    url: 'http://elk.example.com:9200/users/user/' + this.id 
    }).done(data => { 
     this.name = data._source; // 'this' points to outside scope 
     this.name.valueset = true; 
    });

類似的答案：https://stackoverflow.com/a/40200989/654825

來源

2016-10-24 12:15:17 Mani

對於未來的讀者：截至2016年10月，IE不支持箭頭功能（可能永遠不會像IE 11是最後一個IE）。邊緣，Chrome瀏覽器，Firefox都可以工作。 – WoJ

是的，IE11不支持箭頭功能。但是，當使用vue-cli進行生產構建時，babel編譯器負責將箭頭函數轉換爲ES5兼容代碼。所以你仍然可以使用箭頭函數，但是在Chrome/Firefox中完成整個開發，並在IE11中進行最終測試。 – Mani

謝謝 - 我不知道vue-cli。 – WoJ

不相同範圍爲this.name

create_casenr: function(event) { 
// update the full name of user 
$.ajax({ 
    url: 'http://elk.example.com:9200/users/user/' + this.id 
}) 
.done(function(data) { 
    console.log(data); 
    this.name = data._source; 
    this.name.valueset = true; 
    console.log(this.name); 
}.bind(this))

ad d a bind(this)

來源

2016-10-24 12:22:19 highFlyingDodo

它看起來像'.bind（）'在jQuery 3中被棄用，並且在之前不鼓勵（根據http://api.jquery.com/bind/） – WoJ

@WoJ：它綁定了ES5.1函數來綁定內部匿名函數，請參見：https：//developer.mozilla。org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind並且不推薦使用;-) –

如何從jQuery AJAX調用中更新VueJS實例的數據？

回答

相關問題