'How can i implement fade and collapse in vuejs3?

i want to implement collapse and hidden in vuejs

but i think, ref it does not work in vue3

i am getting this error Header.vue?76f0:68 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'myText')

this is my code

<button class="border-0 navbar" @click="toggle()">

 <Links
        class="color-dark"
        ref="myText"
        :style="[isActive ? { height: computedHeight } : {}]"
      />

  function toggle() {
        this.isActive = !this.isActive
      }
      function initHeight() {
        this.$refs.myText.style.height = 'auto'
        this.$refs.myText.style.position = 'absolute'
        this.$refs.myText.style.visibility = 'hidden'
        this.$refs.myText.style.display = 'block'

        const height = getComputedStyle(this.$refs['myText']).height
        this.computedHeight = height

        this.$refs.myText.style.position = null
        this.$refs.myText.style.visibility = null
        this.$refs.myText.style.display = null
        this.$refs.myText.style.height = 0
      }

      watchEffect(async () => {
        initHeight()
      })

i was copying this code to vuejs3 (this worked but i need to vuejs3)

https://jsfiddle.net/rezaxdi/tgfabw65/9/

cssvuejs3


Solution 1:[1]

Looks like there's something more to it than what's in the code. A simple vue2=>vue3 conversion from example works just fine

example:

Vue.createApp({
  data() {
    return {
      isActive: false,
      computedHeight: 0
    }
  },
  methods: {
    toggle: function() {
      this.isActive = !this.isActive;
    },
    initHeight: function() {
      this.$refs['myText'].style.height = 'auto';
      this.$refs['myText'].style.position = 'absolute';
      this.$refs['myText'].style.visibility = 'hidden';
      this.$refs['myText'].style.display = 'block';

      const height = getComputedStyle(this.$refs['myText']).height;
      this.computedHeight = height;

      this.$refs['myText'].style.position = null;
      this.$refs['myText'].style.visibility = null;
      this.$refs['myText'].style.display = null;
      this.$refs['myText'].style.height = 0;

    }
  },
  mounted: function() {
    this.initHeight()
  }
}).mount("#app");
p {
  height: 0;
  overflow: hidden;
  transition: 1s;
}
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="app">
  <p ref="myText" :style="[isActive ? { height : computedHeight } : {}]">
    Now it's smooth - getting closer to BS4 collapse, but now I need to know the exact height of each section at a particular screen size to set the max-height. Over-compensating max-width work ok, but is still a bit 'jerky'. Is there a way to calculate an
    elements height before starting the show/hide? If the max-height value is too small, elements overlap.
  </p>
  <button @click="toggle">Open / Close</button>
</div>

however, I see you are using a watchEffect, so I surmise that you might be using (some????) composition API functionality. In this case, the watch will execute before mount, so it will run initHeight which will fail.

If you are using composition api, there's more things there that might cause it to not work, so you may need to show more of the code. Alternatively, you can stick to the Class API, which works same as it did in vue2.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel

Related Questions