v-for tidak mempunyai pilihan untuk memasangnya

Question

Saya ada masalah dengan v-for saya. Saya memanggil API dan mendapatkan semula data, tetapi v-for tidak dikemas kini.

Ini html saya:

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

dan JS saya:

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

Makluman menunjukkan data supaya ia boleh diambil dengan baik, tetapi input saya tidak sah.

Saya juga cuba memberikan "listedespartenaires" terus dari get tanpa melalui kaedah, tetapi hasilnya adalah sama.

Saya juga mencuba this.$forceUpdate(); selepas menetapkan "listedespartenaires". Tetapi tiada kejayaan.

Boleh sesiapa tolong saya?

Terima kasih,

Philippe

Answer 1

CubaJSON。 parse() Respons anda:

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 }}