Vue чтение данных- * атрибут

Question

Как я могу синхронизировать переменную "counter" внутри значения чтения VUE из атрибута data-val? В этом примере я использую setTimeout, чтобы изменить значение атрибута data- *. Мое решение - вызвать метод refresh () с помощью события @mousemove.

new Vue({
  el: '#app',
  data: {
  	counter: 1
  },
	template: '<div id="wrapper" @mousemove="refresh"><div id="el1" :data-val="counter">Value: {{ counter }}</div></div>',
  watch: {
	  counter: function(val, oldVal){
    	this.counter = val;
    }
  },
methods: {  refresh() { 
           this.counter = document.getElementById('el1').getAttribute("data-val"); 
             }
       }
});

 
var i=1;
timer = setInterval(changeDOM, 1500);
function changeDOM() {
	i++;
  el=document.getElementById('el1');
  el.setAttribute("data-val", i);
  console.log(el.getAttribute("data-val"));
}

#wrapper{
width: 100%;
height: 100%;
background-color: aqua;
position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
  
 

Answer 1

Было бы много способов достичь вашей цели, но если вы хотите использовать экземпляр vue, вам нужно назначить экземпляр vue в переменной, как показано ниже

var app = new Vue({

, а затем изменить counter на app.counter

var app = new Vue({
  el: '#app',
  data: {
  	counter: 1
  },
	template: `<div id="el1" :data-val="counter">
  <div>Value: {{ getCounter }}</div>
  <div><input type="text" v-model="counter"></div>
  </div>`,
  computed: {
	  getCounter: function(val, oldVal){
    	return this.callMethod1(this.counter);
    }
  },
  methods:{
      callMethod1: function(){
         console.log("callMethod1 called with counter value : "+this.counter);
         return this.counter;
      }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>