分享
三行代码  ›  专栏  ›  技术社区  ›  Yerlan Yeszhanov

如何仅使用一个v-for循环3个数组? - How to loop thru 3 arrays using only one v-for?

  •  0
  • Yerlan Yeszhanov  · 技术社区  · 12 月前

    我在Vuex状态下有3个数组。如何使用一个v-for循环遍历所有这些函数?例如:

        export const stepOne = {
      state: {
        textfields: [
          {
            value: "",
            label: "weight",
          },
        ],
        textfieldTire: {
          value: "",
          label: "Tire radius",
        },
        textfieldDocument: [
          {
            value: "",
            label: "Document",
          },
        ],
    
      },
    }
    

    这就是我显示它们的方式,但它只显示“textfields”数组。如何在不使用多个V-for的情况下输出数据?

    .check-data
        .table(
          v-for='(item, idx) in $store.state.stepOne.textfield'
          :key='idx'
        ) 
          .label
            | {{$store.state.stepOne.textfield[idx].label}}
          .value
            | {{$store.state.stepOne.textfield[idx].value}}
    
    1 回复  |  直到 12 月前
        1
  •  2
  •   Konrad Kalemba    12 月前

    带有数组的计算属性 concat 方法应该完成这项工作。

    export default {
      /* other properties */
      computed: {
        textfields () {
          const { textfield, textfieldTire, textfieldDocument } = this.$store.state.stepOne
    
          return textfield.concat(textfieldTire, textfieldDocument)
        }
      }
    }
    

    然后将迭代的数组更改为我们刚刚创建的数组。

    .check-data
        .table(
          v-for='(item, idx) in textfields'
          :key='idx'
        ) 
          .label
            | {{item.label}}
          .value
            | {{item.value}}