VueJS - Axios數組未更新

Question

我想從我的數組中聲明的數組更新。當我用對象初始化數組時，這個對象很好地出現在HTML代碼中。看起來陣列在axios調用的範圍之後沒有「保存」。任何人都可以幫助我嗎？我沒有任何錯誤代碼/消息。

var vm = new Vue({ 
el: '#recettes', 
data: { 
    results: [] 
}, 
created() { 
    axios.get('url') 
    .then((response) => { 
    this.results = response.data 
    console.log("Size before end of scope = " + this.results.length) // = 4 
    }); 
    console.log("Size after = " + this.results.length) // = 0 
} 
}); 

響應API是：

[ 
    { 
    "id": 1, 
    "titre": "Cassoulet", 
    "contenu": "Couper. Faire cuire...", 
    "id_util": 1 
    }, 
    { 
    "id": 2, 
    "titre": "Gateau", 
    "contenu": "chocolat", 
    "id_util": 4 
    }, 
    { 
    "id": 3, 
    "titre": "Gateau", 
    "contenu": "fraise", 
    "id_util": 5 
    }, 
    { 
    "id": 4, 
    "titre": "Gateau", 
    "contenu": "Mélanger, cuire, four 220°...", 
    "id_util": 5 
    } 
] 

模板：

<div id="recettes"> 
    <div v-for="result in results"> 
     <div class="card"> 
     <div class="card-divider"> 
      {{ result.titre }} 
     </div> 
     <div class="card-section"> 
      {{ result.contenu }} 
     </div> 
     </div> 
    </div> 
    </div> 

UPDATE

var vm = new Vue({ 
    el: '#recettes', 
    data: { 
    results: [] 
}, 
created() { 
    axios.get('URL') 
    .then(response => { 
    this.results = response.data 
    console.log("size: " + this.results.length) 
    console.log('results[0]: ' + this.results[0].titre) 
    }) 
} 
}); 

有了這個代碼，結果[0] .titre，包含3 ns正確的字符串。但是在HTML代碼中，沒有顯示卡片。 而與此代碼：

var vm = new Vue({ 
    el: '#recettes', 
    data: { 
    results: [ 
     {"id" = 1, "id":1,"titre":"Cassoulet","contenu":"Couper. Faire cuire...","id_util":1} 
    ] 
}, 
created() { 
    axios.get('URL') 
    .then(response => { 
    this.results = response.data 
    console.log("size: " + this.results.length) 
    console.log('results[0]: ' + this.results[0].titre) 
    }) 
} 
}); 

一卡顯示在滴定值=「卡酥來砂鍋」 HTML和contenu =「Couper馬戲團cuire ......。」

這就是爲什麼我說，似乎該陣列不更新...

Answer 1

嗨，我認爲這是一個異步問題。正如你所看到的，JavaScript不會等待另一個函數完成。試試這個。

created() { 
    axios.get('url') 
    .then((response) => { 
    this.results = response.data 
    console.log("Size before end of scope = " + this.results.length) // = 4 
    return true; 
    }).then((response) => { 
     console.log("Size after = " + this.results.length) // = 4 
    }); 
    // console.log("Size after = " + this.results.length) // = 0 
} 

UPDATE1：新增小提琴

下面是一個示例搗鼓你看的。 https://jsfiddle.net/khenxi/n49zj258/

Answer 2

Vue是被動的。

該請求是異步的，因此您正在檢查大小的代碼在之前運行then()部分。如果你把{{ results.length }}在你的模板它會0然後4速度非常快，你可能從來沒有看到它在0

只是因爲長度爲0當您登錄並不意味着它不是「救」 。

如果你想在一個可變長度，你可以使用一個計算的屬性，做：

computed: { 
    resultsLength() { 
    return this.results.length 
    }, 
}