Vuejs moving data between multiple components

Question

I have a parent component with two children components that I need data to move between. I can get emitted data from one child (multiselect.vue) to the parent, but cannot get it to then move into the other child component (render.vue). I suspect it has something to with v-model. Below is a simplifed version.

Parent component

<template>
  <div>
    <multiSelect v-model="content" />
    <renderSplashPage :content="render" />
  </div>
</template>

<script>
import multiSelect from '@/utils/multiSelect'
import render from '@/components/Render'

export default {
  components: {
    multiSelect,
    render,
  },
    name: 'somename',
  data(){
    return{
      content: {},
      render: {}
    }
  },
  watch: {
    'content': function(val) {
      this.render = val;
    },
  },
}
</script>

How can I get the emitted data to be 'watched' and 'picked up' by the 'render' component?

Is multiselect.vue modifying the data in anyway? Is that modified data what you need to pass to render.vue? — Azeame
– Azeame, Commented Oct 8, 2018 at 22:35
Are you sure the watch is called? have you logged the value? If the response is YES for both, then you have problems with the fact that vue data objects are not deeply reactive. So you shouldn't change the reference of an object like that . — V. Sambor
– V. Sambor, Commented Oct 8, 2018 at 22:36

tony19 · Accepted Answer · 2022-07-15 21:52:07Z

3

render is a reserved name (i.e., the internal render function cannot be overwritten), and for some reason, Vue silently ignores attempts to modify it.

Rename your property (e.g., to "myRender"), and you should see reactivity. If myRender is always equal to content, you could actually just replace it with content in your binding:

<multiselect v-model="content" :options="options" />
<render :content="content" />

demo

edited Jul 15, 2022 at 21:52

answered Oct 8, 2018 at 22:59

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs moving data between multiple components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related