[Vuejs]-Vue / Vuetify: get dimensions of v-flex

by

0👍

Your code in the demo is incorrect, you’re saving the onResize() results into this.windowSize, but you’re referencing mx and my in the template.

<template>
  <v-app>
    <v-container dark grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12 v-resize="onResize">
          <v-card color="primary"> <svg></svg> </v-card>
        </v-flex>
      </v-layout>
      mounted x: {{ windowSize.x }} mounted y: {{ windowSize.y }}
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: "Test",
  data: () => ({ windowSize: { x: 0, y: 0, mx: 0, my: 0 } }),
  methods: {
    onResize() {
      this.windowSize = { x: window.innerWidth, y: window.innerHeight };
    }
  },
  mounted() {
    this.onResize();
  }
};
</script>

Here, I fixed your sandbox: https://codesandbox.io/s/k53oyn3n07

    Leave a comment