如何在Ionic Vue.js中获取所有ion-button的ID以动态修改文本？

首先要明确：你当前的三个ion-buttonID都是"11"，这违反了HTML规范（ID必须唯一），根本没法通过ID区分单个按钮，第一步得先把ID改成唯一值，比如btn-1、btn-2、btn-3。

下面针对Vue项目（代码里用了@click，应该是Ionic Vue）给出两种实现方式：

方式一：用ref批量获取按钮（推荐） #

1. 给每个按钮添加统一的ref属性：

<ion-button ref="skinToneBtn" class="ion-button-1" id="btn-1" shape="circle" @click="SkinToneClicked($event)"></ion-button>
<ion-button ref="skinToneBtn" class="ion-button-2" id="btn-2" shape="circle" @click="SkinToneClicked($event)"></ion-button>
<ion-button ref="skinToneBtn" class="ion-button-3" id="btn-3" shape="circle" @click="SkinToneClicked($event)"></ion-button>

2. 在组件中获取按钮并修改文本：

Options API写法 #

methods: {
  updateButtonTexts() {
    const buttons = this.$refs.skinToneBtn;
    buttons.forEach(btn => {
      const btnId = btn.id;
      // 可根据ID设置不同文本，示例如下
      btn.textContent = `按钮${btnId.split('-')[1]}`;
    });
  }
}

Composition API（Vue3）写法 #

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const skinToneBtn = ref([]);
    
    onMounted(() => {
      skinToneBtn.value.forEach(btn => {
        const btnId = btn.id;
        btn.textContent = `按钮${btnId.split('-')[1]}`;
      });
    });
    
    return { skinToneBtn };
  }
}

方式二：用DOM选择器直接获取 #

如果不想用ref，也可以直接通过选择器抓取所有ion-button：

const allButtons = document.querySelectorAll('ion-button');
allButtons.forEach(btn => {
  const btnId = btn.id;
  // 必须确保ID唯一，否则无法区分按钮
  btn.textContent = `新内容-${btnId}`;
});

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