Question

我的Vuex状态中有3个数组。如何使用ONE v-for循环遍历所有这些对象？例如：

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

  },
}

这就是我如何显示它们，但是它仅显示“文本字段”数组。如何在不使用多个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}}

Answer 1

具有Array的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}}

如何仅使用一个v-for循环3个数组？

1 个答案: