如何修复vuejs中svg的getTotalLength（）的结果时间？

Question

this.$refs.pathID.getTotalLength() returns 0 when it should return the length, and returns the legnth when it should return 0 .

my vue component is a svg path element, there is a button to toggle the path. the toggle is accomplished via binding the d atttribute of the path to a property called path . there is a function that runs on mount that generates the value for the d attribute, ive set this value to a property called pathValue . so, if clicked == true then path = pathValue , else path = null . this works as expected.

further i watch path so that when there is a change, (onclick) then the path length should be recalculated, and its value set to a css custom variable.

<template>
  <main>

    <svg viewBox="0 0 415 200">
      <path ref="pathID" :d=path />
    </svg>

    <button @click="show()">nsr</button>

  </main>
</template>

<script>
  export default {
    data() {
      return {
        path: null,
        clicked: true,
        pathValue: null,
        pathLength: 0
      }
    },

    methods: {
      show() {
        if(this.clicked) {
          this.path = this.pathValue
          this.clicked = !this.clicked
        } else {
          this.path = null
          this.clicked = !this.clicked
        }
      },

      generatePath() {
        // generates a string value for the d-attribute were binding to path
        let path = "M410 100,"
        for(let i = 0; i < 5; i++) {
          path += `
          h-10, 
          q-5 -20, -10 0, 
          h-10, 
          s-5 -100, -10 -0, 
          s-5 50, -10 0, 
          h-10, 
          q-10 -20, -20 0, 
          h-5`
        }
        return path
      }
    },

    mounted() {
      this.pathValue = this.generatePath()
    },

    watch: {

      path: function() {
        // trigger computed setter here when path is changed onclick
        this.calculatePathLength = this.$refs.pathID
      },
      pathLength: function() {

        // set custom variable here
      this.$refs.pathID.style.setProperty("--path-length", this.calculatePathLength)
      console.log('value of computed property: ' + this.calculatePathLength)
      }
    },

    computed: {
      calculatePathLength: {
        get: function() {

          return this.pathLength
        },
        set: function(x) {

          this.pathLength = x.getTotalLength()
          console.log('path length is: ' + this.pathLength)
        }
      }
    }
  }
</script>

so when the button is clicked, the value of the d-attribute should be updated, the watcher should notes the change in path and the setter of the computed property calculatePathLength is called, updates the value of pathLength , then the watcher for pathLength should call the getter in setting the custom property var(--path-length) .

so the expected result should be that pathLength should be logged, it is. but when it should be non-zero it is zero, and when it should be zero it is non-zero

Answer 1

When you change this.path you need to give time for the svg element to redraw before the new getTotalLength() can be calculated.

Vue provides the this.$nextTick() function exactly for this purpose. To make your code above work:

watch: {
    path: function() {
        // trigger computed setter here when path is changed onclick
        this.$nextTick(()=>this.calculatePathLength = this.$refs.pathID);
    },
    ...

Answer 2

this question was answered on the vue forum here , the explanation is that the svg is not given enough time to update before measure the path length, and this is the purpose of the vue.$nextTick() . here is the code that fixes the above situation:

    watch: {

      path() {
        this.$nextTick(() => this.pathLength = this.$refs.pathID.getTotalLength());
      }
    },

thank you @wildhart