v-for n'a pas d'option pour l'installer

Question

J'ai un problème avec mon v-for. J'appelle l'API et récupère les données, mais le v-for n'est pas mis à jour.

Voici mon 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>

et mon 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>

L'alerte affiche les données afin qu'elles puissent être récupérées correctement, mais ma saisie n'est pas valide.

J'ai aussi essayé d'attribuer des "listedespartenaires" directement depuis le get sans le passer par la méthode, mais le résultat est le même.

J'ai aussi essayé this.$forceUpdate(); après avoir assigné des "listedespartenaires". Mais aucun succès.

Quelqu'un peut-il m'aider ?

Merci,

Philippe

Answer 1

EssayezJSON。 parse() Votre réponse :

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

  
    
      {{ partenaire.name }}
    
  
  {{ selected }}