vue3中根据二维数组属性点击渲染

在Vue3中，如果你有一个二维数组，并希望根据其中某个属性的值来动态渲染列表，你可以使用`v-for`指令结合`key`属性以及`@click`事件。假设你有这样一个二维数组：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', category: 'Category A' },
      { id: 2, name: 'Item 2', category: 'Category B' },
      // ... 更多项
    ]
  }
}

然后在模板部分（如`.vue`文件的`<template>`标签内），你可以这样做：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id" @click="handleItemClick(item)">
        {{ item.name }} (Category: {{ item.category }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(item) {
      console.log(`Clicked on item: ${item.name}`);
      // 根据需要在此处处理点击事件，比如跳转、显示详细信息等
    }
  }
}
</script>

在这个例子中，每次点击列表项时，`handleItemClick`方法会被触发，你可以在该方法中获取到点击的`item`对象并进行进一步的操作。