Vue чтение атрибута data-*
Как я могу синхронизировать переменную «счетчик» внутри значения чтения 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.info(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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info("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>Я обновил свой ответ, проверьте еще раз. И если этот ответ не соответствует вашим требованиям, добавьте дополнительную информацию в свой вопрос.
Если я вставлю обратно setTimeout, изменив атрибут data-val, он не синхронизируется с показанным значением: {{counter}}.
Мне жаль, почему вы хотите, чтобы оба пути с vue могли легко запускаться. не нужно использовать setTimeout
Я не имею никакого влияния на основной скрипт, создающий атрибут data-*. Я просто использую VUE для написания плагина, работающего с существующим кодом. Мое решение прямо сейчас не очень хорошее и имеет плохую производительность. Я использую <body @mousemove = "refresh"> для вызова этой функции: method: { refresh() { this.counter = $('#el1').attr('data-val'); } }
setTimeout был просто примером. Я не имею никакого влияния на то, кто или что изменяет атрибут data-val (возможно, внешними скриптами или пользователем). Мне нравится «смотреть» атрибут data-val внутри VUE и вызывать метод, получающий фактическое значение после его изменения.