CODEWITHSUNDEEP
javascriptvue.jsvuejs2
user10475514
user10475514

Reputation:

Vuejs moving data between multiple components

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?

Upvotes: 2

Views: 569

Answers (1)

tony19
tony19

Reputation: 138216

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

Upvotes: 3

Related Questions