Vue -如何动态设置网格区域名称

<template>
  <div>
    <div class="grid-container" :style="gridStyle">
      <div class="grid-item">Item 1</div>
      <div class="grid-item">Item 2</div>
      <div class="grid-item">Item 3</div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    gridStyle() {
      return {
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        gridTemplateRows: 'auto',
        gridTemplateAreas: `'${this.gridArea1}' '${this.gridArea2}' '${this.gridArea3}'`,
      };
    },
    gridArea1() {
      // 返回第一个网格区域的名称
      return 'area1';
    },
    gridArea2() {
      // 返回第二个网格区域的名称
      return 'area2';
    },
    gridArea3() {
      // 返回第三个网格区域的名称
      return 'area3';
    },
  },
};
</script>

<style>
.grid-container {
  width: 300px;
  height: 200px;
}

.grid-item {
  padding: 10px;
  border: 1px solid black;
}
</style>