Subscribe on changes!

Parent paragraph not rerendering reactive array object if emitted from v-model of child

avatar
Jun 3rd 2022

Vue version

3.2.26

Link to minimal reproduction

https://stackoverflow.com/questions/72484498/child-emit-does-not-update-v-model-prop-array-of-parent/72485417#72485417

Steps to reproduce

Create a parent component with an array prop, pass it down to a child component, update the prop array inside the child and emit it back to the parent. Render the array in a paragraph tag which in my case only rendered the first update and didn't render all consecutive updates of the array. The array was in fact updating (tested with setInterval() function) but the paragraph didn't render it.

What is expected?

Paragraph should render changes in a reactive object, updated by the child via emit

What is actually happening?

Paragraph updates first emit and no consecutive emits

System Info

System:
    OS: macOS 11.6.1
    CPU: (8) arm64 Apple M1
    Memory: 179.98 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Safari: 15.1
  npmPackages:
    vue: ^3.2.31 => 3.2.34

Any additional comments?

See my stack question for exact information:

https://stackoverflow.com/questions/72484498/child-emit-does-not-update-v-model-prop-array-of-parent/72485417#72485417

avatar
Jun 3rd 2022

Somewhat similar to your situtation except in reverse (child to parent): https://github.com/vuejs/docs/issues/1749

avatar
Jun 5th 2022

is this what you say? SFCPlayground