How to dynamically change the value of an attribute?

Question

Vue.js

I have an element that has its transform value changed.

<g id="wrapper-svg" transform="matrix(1, 0, 0, 1, 0, 0)"></g>

data stores the values ​​of matrix.

data() {
  return {
    matrix: {
        a: 1, 
        b: 0, 
        c: 0, 
        d: 1, 
        x: 0, 
        y: 0,
      }
  }
}

And when they change, I set the new values ​​using setAttribute

wrapper.setAttribute("transform", `matrix(${a}, ${b}, ${c}, ${d}, ${x}, ${y})`)

Is there a way to do this dynamically so that vue will listen for the values ​​and apply the changes?

Answer 1

:transform="matrix"
Upd: hurried.
you can like this:

computed: {
  computedMatrix() => `matrix(${this.matrix.a}, ..., ..., ...)`
}

:transform="computedMatrix"