vue.js - 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´s 目前只是剪切离开。一般来说，当它被动画化时，它看起来要好得多。

有谁知道我是否以及如何v-col使用过渡或其他动画更改宽度？

标签： vue.jsvuetify.jstransition

Answer 1

我认为您以错误的方式使用观察者。在这里，我展示了我如何看待您的案例，但我不确定它是否可以正常工作。如果您还有更多问题，我可以在评论中回答

<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>