Vue.js：通过循环遍历数组值来绑定文本字段的值

Posted 2023-02-16

【中文标题】Vue.js：通过循环遍历数组值来绑定文本字段的值

【英文标题】：Vue.js: bind value of text-field by cycling through array values

【发布时间】：2021-09-14 23:15:42

【问题描述】：

我正在使用 Firebase Firestore 和 Vue.js，我想在文本字段中显示来自文档的数据。 例如。下图：我的收藏文件中的文档包含 alpha、beta、gamma 字段。

有没有办法将值绑定为数组 docItems 中的项目？我已经尝试了所有我能想到的，使用''标记，“this.docItems [n]”这不起作用等等......我无法让它循环并显示每个docItem之一。任何建议将不胜感激，谢谢。

<v-card class="mx-auto pa-3 ma-2 text-center" v-for="Paper in Papers" :key="Paper.id">
  <v-row class="d-flex justify-space-around pa-0 ma-0">
    <v-col cols="1" class="d-flex pa-0 ma-0" v-for="n in 3" :key="n">
      <v-text-field outlined autocomplete="false" :value="Paper.alpha"></v-text-field>

<script>
export default 
  data() 
    return 
      //Showing various combinations I tried:
      docItems: ['Paper.alpha', Paper.beta, 'gamma'],

...

firestore: 
    Papers: db.collection("Papers")
  ,

...

</script>

【参考方案1】：

我认为这可以帮助你：

<v-card class="mx-auto pa-3 ma-2 text-center" v-for="Paper in Papers" :key="Paper.id">
  <v-row class="d-flex justify-space-around pa-0 ma-0">
    <v-col cols="1" class="d-flex pa-0 ma-0" v-for="i in docItems" :key="i">
      <v-text-field outlined autocomplete="false" :value="Paper[i]"></v-text-field>

和

<script>
export default 
  data() 
    return 
      //Showing various combinations I tried:
      docItems: ['alpha', 'beta', 'gamma'],

...

firestore: 
    Papers: db.collection("Papers")
  ,

...

</script>