Vue 3 not updating inline style-CodePudding

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/[email protected]/dist/vue.global.prod.min.js"></script>
    </head>

    <body>
        <div id="map">
            <div id="infantry"  :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?

CodePudding user response：

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/[email protected]/dist/vue.global.prod.min.js"></script>
</head>

<body>
  <div id="map">
    <div  :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>