How to get an attribute in Vue.js?

Question

Vue.js

<div id="app" class="ui segment">
    <div>123</div>
      <div v-for="(user, index) in users">
      	<div class="ui grid object_target">
      			
      			<div class="four wide column field">
      				 <?= $form->field($model4, 'file[]')->fileInput(['multiple' => true, 'accept' => 'image/*']) ?>
      			</div>
      			<div class="two wide column field">
      				<label style="font-weight: normal;font-size: 14px;" >Номер</label>
      			    <input type="text" v-model="user.procent"    disabled="disabled"  name="dirFiles[num][]"    />
      			
      			</div>
      			<div class="four wide column field">
      			    
      				<?= $form->field($model4, 'date_dog[]')->textInput(['maxlength' => true,'type'=>'date','disabled'=>$disabled,'value'=>date('Y-m-d',time()) ]);?>
      			</div>
      			<div class="three wide column field">
      			   
      				<?= $form->field($model4, 'cat_id[]')->dropDownList($dops,$params_cat_dop);?>
      			</div>
      			<div class="one wide column field">
      				 <p @click="deleteUser(index)" class="ui button red" style="margin-top:20px;">
                <i class="ui icon trash"></i>
              </p>
      			</div>
      	</div>
         
       
      
       
      </div>
      
      <p @click="addUser" class="ui button">
        +
      </p>
      
      
    </div>

new Vue({
  el: '#app',
  data: {
    users: [{ name: '',procent:'' }],
    message:'1',
     
  },
  methods: {
      addUser(index) {
      
      	var vm = this
  
      	this.users.push({
       	 	name: '',
        	procent: this.users.length+1,
    	});
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    },
  
  },
   computed: {
      percentTotal() {
      
      return this.users.reduce((acc, user) => acc + parseInt(user.procent, 10), 0)
      },
 	},
});

In the diva where 123 is written, I'm going to insert a number from the database there.
How can I find out the value of this div through Vue.js and use the percentage for the value in the addUser method?

Answer 1

Use ref . In a template, for example:

<div data-bullshit-attribute="hello, world!!" ref="div"></div>

In code:

const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');

One thing is not clear - why the hell not immediately put the desired value in data, why read the attribute ?