在vue js中观察值的属性更改（双向数据绑定）

Question

我尝试进行双向数据绑定以观察DOM属性值。

<template>
  <div>
    <annotations>

      <!-- Need to watch x value. <rect> wil be manipulated from <annotations> to hide complexity -->
      <rect :x="x" class="box" slot="annotation" y="10" width="100" height="100"></rect>

      <img src="./assets/logo.png" />
    </annotations>
  </div>
</template>
<script>
export default {
  components: {
    'annotations': () => import('./components/Annotator')
  },
  data () {
    return {
      x: 10
    }
  }
}
</script>

我试图观看它但它不起作用

watch: {
    x (val) {
      console.log(val)
    }
  }

还尝试使用sync（希望它能做一些魔术）但仍然相同

<rect :x.sync="x" class="box" slot="annotation" y="10" width="100" height="100"></rect>

注意：<rect>为svg element

Answer 1

The .sync modifier依赖于发出update事件的组件。普通的SVG无法做到这一点。只有Vue组件可以。

您的annotations组件似乎是在SVG中修改x的内容。这就是您应该将x变量绑定到的内容，当它更改值时，组件应该发出事件。