How to add text around dynamically assigned aria labels with Vue JS

Question

I am very new to vue.js and accessibility,

I am trying to make an element be announced by the screen reader as ("This is " + person.name).

I was able to announce the person.name with :aria-label="person.name" but I am not able to add text around this.

How do I add text around the dynamically assigned :aria-label?

Answer 1

Did you try with :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>