我的 v-for 有問題。我調用 API 並檢索數據,但 v-for 未更新。
這是我的 html:
<input list="listenomspartenaires" id="inputlistenomspartenaires" type="text" name="nominputlistenomspartenaires">
<datalist id="listenomspartenaires">
<option v-for="partenaire in listedespartenaires" :value="partenaire.nom" :key="partenaire.idpartenaire" :data-idpartenaire="partenaire.idpartenaire" /> <!-- -->
</datalist>
和我的 JS :
<script lang="js">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
listedespartenaires : []
};
},
methods:{
SetNoms(lesnoms){
this.listedespartenaires = lesnoms;
alert(lesnoms);
}
},
mounted() {
fetch("https://localhost:7264/api/partenaires/GetNoms")
.then((response) => response.text())
.then((data) => this.SetNoms(data));
}
});
</script>
警報顯示了數據,因此可以很好地檢索它們,但我的輸入無效。
我還嘗試直接從獲取中分配“listedespartenaires”,而不通過方法傳遞,但結果是相同的。
在指派「listedespartenaires」後,我還嘗試了 this.$forceUpdate(); 。但沒有成功。
有人可以幫我嗎?
謝謝,
菲利普
嘗試
JSON。 parse()你的回應:const app = Vue.createApp({ data() { return { listedespartenaires : [], selected: null }; }, methods:{ setNoms(lesnoms){ this.listedespartenaires = JSON.parse(lesnoms); //alert(lesnoms); } }, mounted() { fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.text()) .then((data) => this.setNoms(data)); } }) app.mount('#demo')