javascript Vue 3 -发射到父对象后观察 prop 停止工作

uemypmqf 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(118)

我在尝试查看子组件中的 prop 时遇到问题。下面是一个操场链接，其中包含一些代码来重现这个问题：
维港体育会Playground
子组件（橙子）从父组件（只是一个数组）继承数据。每当父组件的数据发生变化时，子组件都会从父组件复制数据，然后您可以修改（追加）到子组件数据中，当您单击保存时，数据应该被发送到父组件（然后作为 prop 传递到子组件）。
问题是，一旦您在子组件中单击保存，子组件就不再能够监视属性的更改，它永远不会看到父组件的未来更改，但Vue devtools可以正确地看到数据，我在这里遗漏了什么？

JavaScript

来源：https://stackoverflow.com/questions/75082357/vue-3-watching-prop-stops-working-after-emitting-to-parent

3条答案

按热度按时间

1aaf6o9v1#

watch可组合对象接受函数或ref。
您的props.list并不是真正的React性数据，因此您需要在手表中使用getter函数，以便它正确地侦听属性更改：

watch(() => props.list, () => {
  // ...
})

看看这个工作场所

赞(0）回复(0）举报 2023-01-11

hc8w905p2#

尝试将您的观察程序设置为：

watch(
    () => props.list,
      (newValue, oldValue) => {
        console.log('updated!');
        internalCopy.value = JSON.parse(JSON.stringify(props.list));
     }, {
    immediate: true,
   deep: true,
 }

赞(0）回复(0）举报 2023-01-11

r6vfmomb3#

问题不在计算属性中，问题在onAdd方法中。由于这是一个数组，因此应由reference而不是value更新。

const onAdd = (val) => {
    // data.value.list = val; ❌ 
    val.forEach((d, index) => {
      data.value.list[index] = d ✅
    })
  }

工作Vue SFC Playground

赞(0）回复(0）举报 2023-01-11

我来回答

javascript Vue 3 -发射到父对象后观察 prop 停止工作

3条答案

相关问题

热门标签

最新问答