I have a problem with my v-for
. I call the API and retrieve the data, but the v-for is not updated.
This is my 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>
and my 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>
The alert shows the data so they can be retrieved fine, but my input is invalid.
I also tried assigning "listedespartenaires" directly from the get without passing it through the method, but the result was the same.
I also tried this.$forceUpdate();
after assigning "listedespartenaires". But no success.
Can anyone help me?
Thanks,
Phillip
P粉3080890802024-04-04 10:08:49
TryJSON. parse()
Your response:
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')
sssccc{{ selected }}