Vue.js获取数组索引并同步展示对应标题与描述的实现问题

这里提供两种简单直接的实现方式，核心是在触发事件时传递对应数据，通过Vue实例维护选中项，最终同步渲染到指定容器：

方式一：直接传递当前数组元素 #

这种方式更直观，无需额外通过索引查找元素：

<template>
  <div class="container">
    <!-- 循环渲染的可交互元素 -->
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="handleItemSelect(item)"
      <!-- 若使用@focus，需给div添加tabindex使其可聚焦 -->
      tabindex="0"
      @focus="handleItemSelect(item)"
      class="item-card"
    >
      {{ item.title }}
    </div>

    <!-- 摘要展示容器 -->
    <div class="summary-container">
      <h3>{{ selectedItem?.title || '请选择一个项目' }}</h3>
      <p>{{ selectedItem?.description || '暂无描述' }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 替换为你的实际数组数据
      items: [
        { title: '项目1', description: '这是项目1的详细描述' },
        { title: '项目2', description: '这是项目2的详细描述' },
        { title: '项目3', description: '这是项目3的详细描述' }
      ],
      selectedItem: null // 存储选中的元素
    }
  },
  methods: {
    handleItemSelect(item) {
      this.selectedItem = item
    }
  }
}
</script>

<style scoped>
.item-card {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #eee;
  cursor: pointer;
}
.item-card:focus {
  outline: 2px solid #42b983;
}
.summary-container {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ddd;
}
</style>

方式二：传递索引再获取元素 #

如果需要用索引做额外操作，可选择这种方式：

<template>
  <div class="container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="handleItemSelect(index)"
      tabindex="0"
      @focus="handleItemSelect(index)"
      class="item-card"
    >
      {{ item.title }}
    </div>

    <div class="summary-container">
      <h3>{{ selectedItem?.title || '请选择一个项目' }}</h3>
      <p>{{ selectedItem?.description || '暂无描述' }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 你的数组数据 */],
      selectedItem: null
    }
  },
  methods: {
    handleItemSelect(index) {
      this.selectedItem = this.items[index]
    }
  }
}
</script>

关键注意点 #

• v-for必须绑定:key属性，实际项目中推荐用元素的唯一标识（如item.id），示例用index是因为未提供id字段。
• 若使用@focus事件，div默认不可聚焦，需添加tabindex="0"使其成为可聚焦元素。
• 可选链操作符?.可避免选中项为空时报错，适用于Vue 2.6+或Vue 3；若用旧版Vue，可在摘要容器外层加v-if="selectedItem"。

内容的提问来源于stack exchange，提问作者Gino