Vue项目点击v-for循环渲染的div触发弹窗展示API对应对象完整数据方法

1. 调整模板代码 #

首先给展示user.name的div绑定点击事件，传入当前循环的user对象，同时新增弹窗的DOM结构，修改后代码如下：

<div 
  :style="image"
  class="main-browse">
  <div
    class="names"
    v-for="user in getUsers" 
    :key="user.id">
    <!-- 注意原id="user"在循环中会生成重复id，建议改成class -->
    <div
      class="user"
      :style="{backgroundColor: getColors}"
      @click="selectUser(user)"
    >
      <div>{{user.name}}</div>
    </div>
  </div>

  <!-- 新增弹窗结构 -->
  <div class="modal" v-if="showModal">
    <div class="modal-content">
      <span class="close" @click="closeModal">×</span>
      <h2>{{ selectedUser.name }} 详情</h2>
      <p>邮箱：{{ selectedUser.email }}</p>
      <p>职业：{{ selectedUser.occupation }}</p>
      <!-- 其余需要展示的字段可以自行扩展 -->
    </div>
  </div>
</div>

2. 编写交互逻辑 #

提供两种实现方案，可根据业务场景选择：

方案1：组件本地状态存储（推荐，适合仅当前组件使用弹窗的场景） #

Vue2 选项式API写法：

export default {
  data() {
    return {
      showModal: false,
      selectedUser: {}
    }
  },
  computed: {
    // 原有的从Vuex取用户列表的计算属性保留
    getUsers() {
      return this.$store.state.getUsers
    },
    getColors() {
      // 原有逻辑保留
    }
  },
  methods: {
    selectUser(user) {
      this.selectedUser = user
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
      this.selectedUser = {}
    }
  }
}

Vue3 组合式API写法：

import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const showModal = ref(false)
    const selectedUser = ref({})
    const getUsers = computed(() => store.state.getUsers)
    // 原有getColors逻辑保留

    const selectUser = (user) => {
      selectedUser.value = user
      showModal.value = true
    }

    const closeModal = () => {
      showModal.value = false
      selectedUser.value = {}
    }

    return {
      getUsers,
      showModal,
      selectedUser,
      selectUser,
      closeModal
    }
  }
}

方案2：Vuex全局存储选中用户（适合多组件需要共享选中用户信息的场景） #

首先在Vuex的store中新增对应state和mutation：

// store/index.js
export default new Vuex.Store({
  state: {
    // 原有getUsers等状态保留
    selectedUser: {},
    showUserModal: false
  },
  mutations: {
    SET_SELECTED_USER(state, user) {
      state.selectedUser = user
      state.showUserModal = true
    },
    CLOSE_USER_MODAL(state) {
      state.selectedUser = {}
      state.showUserModal = false
    }
  }
})

组件中直接提交mutation触发状态变更即可：

// 组件方法中
methods: {
  selectUser(user) {
    this.$store.commit('SET_SELECTED_USER', user)
  },
  closeModal() {
    this.$store.commit('CLOSE_USER_MODAL')
  }
},
computed: {
  showModal() {
    return this.$store.state.showUserModal
  },
  selectedUser() {
    return this.$store.state.selectedUser
  }
}

可选：添加弹窗基础样式 #

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
  width: 400px;
}
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

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