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