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

【问题标题】：Vue.js: bind value of text-field by cycling through array valuesVue.js：通过循环遍历数组值来绑定文本字段的值
【发布时间】：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>

【问题讨论】：

标签： firebase vue.js google-cloud-firestore vuejs2

【解决方案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>

【讨论】：