点击事件，通过点击传进来的key去匹配dataInfo对象的key的值

<template>
  <div>
    <el-button
      v-for="card in cards"
      :key="card.key"
      @click="handleClick(card.key)"
    >
      {
  
  { card.label }}
    </el-button>

    <div v-if="selectedCardInfo">
      <h3>选中的卡片信息</h3>
      <p>Key: {
  
  { selectedCardInfo.key }}</p>
      <p>Label: {
  
  { selectedCardInfo.label }}</p>
      <p>Value: {
  
  { selectedCardInfo.value }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const cards = ref([
      { key: 'key1', label: '卡片1' },
      { key: 'key2', label: '卡片2' },
      { key: 'key3', label: '卡片3' },
    ]);

    const cardInfo = ref({
      key1: { key: 'key1', label: '卡片1', value: '这是卡片1的详细信息' },
      key2: { key: 'key2', label: '卡片2', value: '这是卡片2的详细信息' },
      key3: { key: 'key3', label: '卡片3', value: '这是卡片3的详细信息' },
    });

    const selectedCardInfo = ref(null);

    const handleClick = (key) => {
      const matchedCard = cardInfo.value[key];
      if (matchedCard) {
        selectedCardInfo.value = matchedCard;
      } else {
        selectedCardInfo.value = null;
      }
    };

    return {
      cards,
      cardInfo,
      selectedCardInfo,
      handleClick,
    };
  },
};
</script>

总结：

匹配对象的key值：

const handleClick = (key) => {
      const matchedCard = cardInfo.value[key];

原文地址：https://blog.csdn.net/weixin_48420104/article/details/145284748

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！