CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Marsel.V
Marsel.V

Reputation: 1044

vue js passing data to child component

I have a child component contactView of the component contacts-list, which itself is a child. The problem is that I can not dynamically change the contents of this component

html

<div id="wrapper">
  <component :is="currentView" keep-alive></component>
</div>

js

var IndexPage = Vue.component('index-page', {
  template: '<div>Welcome to index page</div>'
})

var Contact = Vue.component('contactView', {
  template: `
  <div class="person-info">
    <ul v-for="contact in contacts">
      <span>here</span>
      <li v-if="contact.email">
        <div class="icon icon-mail"></div>
        {{contact.email}}
      </li>
    </ul>
  </div>
  `,
  props: ['contacts']
})

var ContactsList = Vue.component('contacts-list', {
  template: `
  <div id="list">
    list
    <div v-for="item in items">
        <div class="person">
            person
          <span class="name">{{item.name}}</span>
          <button class="trig">Show {{item.id}}</button>
        </div>
        <contact-view :contacts="item.contacts"> </contact-view>
    </div>
  </div>`,
  computed: {
    items: function(){
      return this.$parent.accounts
    }
  },
  components: {
    'contact-view': Contact
  }
})


var app = new Vue({
  el: '#wrapper',
  data: {
    contacts: [],
    currentView: 'index-page'
  }
})

app.currentView = 'contacts-list';
app.accounts = [{name: 'hello', id: 1}];

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    app.accounts[0].contacts = [{email: '[email protected]'}]
})

After clicking on the button, the component does not display the changed data. How can I do this correctly?

Upvotes: 0

Views: 193

Answers (1)

Bert
Bert

Reputation: 82489

Vue cannot detect when you add properties to an object dynamically. In this code,

app.accounts = [{name: 'hello', id: 1}];

You are adding the accounts property to the Vue dynamically. Instead, start with an empty array.

data: {
  contacts: [],
  currentView: 'index-page',
  accounts: []
}

Also in this code,

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    app.accounts[0].contacts = [{email: '[email protected]'}]
})

you are adding the contacts property to an object that did not previously have a contacts property. If you change your code to this it will work.

 $(document).on("click", "button.trig", function(){
    alert('triggered');
    Vue.set(app.accounts[0],'contacts',[{email: '[email protected]'}])
})

I'm not sure why you are choosing to use jQuery to make these changes to your data, set the handler for your button, etc. All of these can be done with Vue.

Upvotes: 1

Related Questions