I set up some demo code for vue 3, for updating inline style to a computed object, but it doesn't update.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.prod.min.js"></script>
</head>
<body>
<div id="map">
<div id="infantry" class="unit" :style="style">
Position: {{ x }} {{ y }}
</div>
</div>
<script>
const Infantry = {
data() {
return {
x: 0,
y: 0
}
},
mounted() {
setInterval(() => {
this.x++;
this.y++;
}, 1000);
},
computed : {
style() {
return {
top : this.x
};
}
}
}
Vue.createApp(Infantry).mount('#infantry');
</script>
</body>
</html>
This part doesn't work
:style="style"
I check the dom, and it doesn't set the style to use top. Anyone know what's wrong?
The issue is that you're binding an attribute of the element where you mount the vue app then add px to the returned top value:
.unit {
position: absolute
}<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.prod.min.js"></script>
</head>
<body>
<div id="map">
<div class="unit" :style="style">
Position: {{ x }} {{ y }}
</div>
</div>
<script>
const Infantry = {
data() {
return {
x: 0,
y: 0
}
},
mounted() {
setInterval(() => {
this.x++;
this.y++;
}, 1000);
},
computed: {
style() {
return {
top: this.x + "px"
};
}
}
}
Vue.createApp(Infantry).mount('#map');
</script>
</body>
</html>