v-for hat keine Möglichkeit, es zu installieren

Question

Ich habe ein Problem mit meinem v-for. Ich rufe die API auf und rufe die Daten ab, aber das V-for wird nicht aktualisiert.

Das ist mein 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>

und mein 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>

Die Warnung zeigt die Daten an, sodass sie problemlos abgerufen werden können, aber meine Eingabe ist ungültig.

Ich habe auch versucht, „listedespartenaires“ direkt vom Get aus zuzuweisen, ohne es durch die Methode zu übergeben, aber das Ergebnis ist das gleiche.

Ich habe es auch versucht this.$forceUpdate(); nachdem ich „listedespartenaires“ zugewiesen habe. Aber kein Erfolg.

Kann mir jemand helfen?

Danke,

Philippe

Answer 1

尝试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')

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