vuejs/vuetify：使用动画/转换更改colwidth

Question

这是我的应用程序组件：

<template>
  <v-app id="inspire">

    <v-main>
      <v-container fluid>
        <v-row>
          <v-col :cols="dynamicCol">
            <worldmap></worldmap>
          </v-col>

        </v-row>
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
import WorldMap from "./components/WorldMap";

export default {
  props: {
    source: String
  },
  components: {
    worldmap: WorldMap
  },
  computed: {
    changeDynamicCol() {
      return this.$store.state.lineData.data.length;
    }
  },
  watch: {
    changeDynamicCol(value) {
      if (value > 0) {
        this.dynamicCol = 9;
      }
    }
  },
  data: () => ({
    dynamicCol: 12,
    drawer: null
  }),
  created() {
    this.$vuetify.theme.dark = true;
  }
};
</script>

<style scoped></style>

我的应用程序从一个空数组开始，当我接收数据时，第一个容器从12的宽度缩小到9的宽度。代码本身运行良好，但是内部的图表会对视口中的变化做出反应，所以get的当前被切断了。一般来说，它看起来更好当这是动画。

有没有人知道我是否可以以及如何用过渡或其他动画来更改v-col的宽度？

Answer 1

我认为你用了错误的方式使用观察者。在这里我展示了我是如何看待你的案子的，但我不确定它是否运行良好。如果你有更多问题，我可以在评论中回答

null

js lang-js prettyprint-override"><template>
  <v-app id="inspire">

    <v-main>
      <v-container fluid>
        <v-row>
          <v-col :cols="columnCount">
            <worldmap></worldmap>
          </v-col>

        </v-row>
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
import WorldMap from "./components/WorldMap";
import { mapState } from 'vuex'
export default {
  props: {
    source: String
  },
  components: {
    worldmap: WorldMap
  },
  computed: {
    ...mapState({
      lineData: state => state.lineData.data.length
    }),
    columnCount() {
      if (this.lineData > 0) {
      return 9
      }
      return 12
    }
  },
  data: () => ({
    drawer: null
  }),
};
</script>