Vue 3 not updating inline style

December 30, 2021

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?

>Solution :

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>