如何在vuejs中为svg的getTotalLength()确定结果的时间？

Question

this.$refs.pathID.getTotalLength()在应该返回长度时返回0，在返回0时返回legnth。

我的vue组件是一个svg路径元素，有一个按钮来切换路径。切换是通过将路径的d攻击绑定到名为path的属性来完成的。有一个在mount上运行的函数，它为d属性生成值，我已经将这个值设置为一个名为pathValue的属性。所以，如果clicked == true那么path = pathValue，否则path = null。这如预期的那样起作用。

此外，我还watch path，以便在发生更改时(onclick)重新计算路径长度，并将其值设置为css自定义变量。

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

因此，当单击按钮时，应该更新d-attribute的值，观察者应该注意到path中的更改，调用计算属性calculatePathLength的设置器，更新pathLength的值，然后watcher for pathLength在设置自定义属性var(--path-length)时调用getter。

，所以预期的结果应该是，pathLength应该被记录下来。但是当它应该是非零时，它是零，当它应该是零时，它是非零。

Answer 1

当您更改this.path时，需要给svg元素重新绘制时间，然后才能计算出新的getTotalLength()。

Vue正是为此目的提供this.$nextTick()函数的。要使上面的代码正常工作：

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

Answer 2

这个问题是在vue论坛这里上回答的，解释是在测量路径长度之前，svg没有足够的时间进行更新，这就是vue.$nextTick()的目的。下面是修复上述情况的代码：

    watch: {

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

谢谢你@通哈特