How to output data from data attribute to vue.js text?

Question

Vue.js

Hello! I'm trying to get the value of the data attribute by clicking on a div block. While it turned out to be displayed in the console.
How to apply the given data_percent variable in the h1 heading of the page. Or in general how such data is transferred to the text of the page.
Code link (PS Turn on the console at the bottom)

Answer 1

No attributes need to be touched in this case, and they are not needed.
We add two properties to data - possible values, and the selected value:

data: () => ({
  selectedPercent: null,
  percents: [ 30, 40, 50 ],
  ...
}),

We create markup based on data; click processing - the desired value is immediately available, so just do the assignment:

<div v-for="p in percents" @click.prevent="selectedPercent = p">
  ...

We make a calculated property representing the title - the selected value, and if it is not there, we substitute some default string:

computed: {
  header() {
    return this.selectedPercent !== null ? this.selectedPercent : 'hello, world!!';
  },
},

Well, let's get it out:
<h1>{{ header }}</h1>