如何使用Vue JS在动态分配的aria标签周围添加文本

Question

我对vue.js和可访问性非常陌生，

我正在尝试使一个元素被屏幕阅读器宣布为("这是"+ person.name)。

我能够用:aria-label="person.name"宣布person.name，但我无法在此周围添加文本。

如何在动态分配的:aria-label周围添加文本?

Answer 1

你试过:aria-label="'This is ' + person.name"了吗

new Vue({
el: "#demo",
data() {
return {
person: { name: "Logan" }
}
},
mounted() {
console.log(this.$refs.btn)
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button ref="btn" :aria-label="'This is ' + person.name">name</button>
</div>