我试图让vue组件在我的网站上发生不同事件时动态地向屏幕阅读器宣布信息.
我有它的工作，点击一个按钮将填充一个跨度是aria-live="assertive"和role="alert"的文本.但是，在第一次使用时，单击具有类似行为的其他按钮会导致NVDA在阅读新文本之前先阅读前一文本两次.这似乎发生在vue中，但在使用jquery的类似设置中不会发生，所以我猜这与vue呈现到DOM的方式有关.
我希望有一些方法可以解决这个问题，或者有一个更好的方法来向用户阅读文本，而不会有这个问题.非常感谢您的帮助.
Here is a simple component我在一个工作的代码Sandbox 中设置，以显示我遇到的问题(导航到components/HelloWorld.vue查看代码)——Note: This sandbox has changed per the answer below.组件的完整代码如下:
export default {
name: "HelloWorld",
data() {
return {
ariaText: ""
};
},
methods: {
button1() {
this.ariaText = "This is a bunch of cool text to read to screen readers.";
},
button2() {
this.ariaText = "This is more cool text to read to screen readers.";
},
button3() {
this.ariaText = "This text is not cool.";
}
}
};<template>
<div>
<button @click="button1">1</button>
<button @click="button2">2</button>
<button @click="button3">3</button><br/>
<span role="alert" aria-live="assertive">{{ariaText}}</span>
</div>
</template>