v-for n'a pas d'option pour l'installer
P粉988025835
P粉988025835 2024-04-03 18:08:14
0
1
530

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

P粉988025835
P粉988025835

répondre à tous(1)
P粉308089080

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
{{ selected }}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal