属性面板双向绑定失效了怎么办？

迷人的溪纯提问于 2026-03-21 07:59:20 阅读 10

交互

我在做可视化编辑器的属性面板，用 Vue 的 v-model 绑定组件属性，但修改输入框值后，画布上的组件没更新。明明数据变了，watch 也触发了，就是视图不刷新，是不是响应式哪里出问题了？

试过用 $set 强制更新，也检查了 prop 传递层级，还是不行。下面是最简复现代码：

<template>
  <div>
    <input v-model="currentElement.props.text" />
    <div class="preview">{{ currentElement.props.text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentElement: { props: { text: '初始文本' } }
    }
  }
}
</script>

我来解答赞 8 收藏

反馈

1 条解答

闲人东正 Lv1

你这个问题，可能是 Vue 的响应式系统没有检测到对象属性的变化。把 currentElement 改成一个响应式的对象试试，或者用 Vue.set 来确保属性是响应式的。

data() {

  return {

    currentElement: this.$Vue.observable({ props: { text: '初始文本' } })

  }

}

2026-03-21 08:01