vue v-for 嵌套 二維數組 示例

<template>
  <v-container fluid grid-list-md class="thirdMain_main_div_container">
    <v-layout row wrap>

      <v-flex d-flex xs12 sm12 md12 class="thirdMain_flex_3_1">
        <h2 style="text-align: left; justify-content: left;">
          <i class="el-icon-thirdIconfengefuhao"></i>測試資料
        </h2>
      </v-flex>

      <v-layout row wrap class="thirdMain_layout_1">
        <v-flex d-flex xs6 sm4 md3 class="thirdMain_flex_3_2" v-for="(v, i) in thirdMain_Info_3_2_1" :key="i">

          <div style="text-align: left; justify-content: left;" class="thirdMain_flex_3_2">

            <nut-button type="flat" class="thirdMain_flex_button" @click="click_ref(v.title)">
              <span v-line-clamp:20="1">
                {{v.title}}
              </span>
            </nut-button>

            <v-divider class="thirdMain_flex_3_2_1_br" />

            <v-flex v-for="(m, i) in v.thirdMain_Info_3_2_2" :key="i" d-flex xs12 sm12 md12
              class="thirdMain_flex_3_2_2">

              <nut-button type="flat" class="thirdMain_flex_button_1" @click="click_ref(v.title)">
                <span v-line-clamp:18="1">
                  {{m.element}}
                </span>
              </nut-button>

            </v-flex>
          </div>
        </v-flex>

      </v-layout>

    </v-layout>

  </v-container>

</template>

<style>
  .thirdMain_main_div_container {
    margin: 0px;
    padding-top: 0px;
  }

  .thirdMain_flex_3_1 {
    margin-top: 30px;
  }

  .thirdMain_flex_3_2 {
    max-height: 300px;
    font-size: 18px;
  }

  .thirdMain_flex_3_2_1 {
    max-height: 50px;
    width: 200px;
  }

  .thirdMain_flex_3_2_1_br {
    color: #1f74ff !important;
    height: 5px;
    border-color: #1f74ff !important;
    margin-top: 4px;
    margin-bottom: 4px;
    max-width: 230px;
  }

  .thirdMain_flex_3_2_2 {
    max-height: 50px;
    width: 200px;
    color: black;
    margin-left: 10px;

  }

  .thirdMain_layout_1 {
    padding-top: 10px;
  }

  .thirdMain_flex_button {
    padding: 0;
    border: 0;
    font-size: 18px;
    background: #ffffff00;
    color: black;
    height: 20px;

  }

  .thirdMain_flex_button_1 {
    padding: 0;
    border: 0;
    font-size: 16px;
    text-align: left;
    justify-content: left;
    background: #ffffff00;
    color: dimgray;
    height: 20px;

  }
</style>


<script>
  export default {
    name: "thirdMain",
    data() {
      return {
        thirdMain_Info_3_2_1: [{
          title: "你好",
          thirdMain_Info_3_2_2: [{
              element: "business resourcessacascascascascasc",
            },
            {
              element: "resources",
            },
          ]
        }, {
          title: "好啊",
          thirdMain_Info_3_2_2: [{
              element: "business resources",
            },
            {
              element: "resources",
            },
            {
              element: "business resources",
            },
            {
              element: "business resources",
            }, {
              element: "123",
            }
          ]
        }]
      }
    },
    methods: {
      click_ref(title) {
        let routeUrl = this.$router.resolve({
          name: "aaa", //某個頁面
        });
        window.open(routeUrl.href, "_blank");
      }
    }
  }
</script>
           

效果：