v-for 沒有安裝他的選項

Question

我的 v-for 有問題。我調用 API 並檢索數據，但 v-for 未更新。

這是我的 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>

和我的 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>

警報顯示了數據，因此可以很好地檢索它們，但我的輸入無效。

我還嘗試直接從獲取中分配“listedespartenaires”，而不通過方法傳遞，但結果是相同的。

在指派「listedespartenaires」後，我還嘗試了 this.$forceUpdate(); 。但沒有成功。

有人可以幫我嗎？

謝謝，

菲利普

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

sssccc

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