[Vuejs]-How to add specific object to child?

by

0👍

first: when render UI by the array ,use indexs as the dataset,the indexs includes all parent index of current child and index of it;

second: when click the button,split the indexs to an index array ,then foreach the array ,and find which child2 been clicked,then insert a child3 into it ,then rerender the UI;

0👍

Assuming that you are using Vue.js for your front end, you are most probably using the v-for directive to render lists directly.

<li v-for="(item, index) in items"> </li>

As shown above, you can use the index property in the callback function to pass an index prop to your component during render:

<MyComponent
  v-for="(item, index) in items"
  :index="index"
   :key="item.id"
/>

Inside your component, use the onClick event handler of your button to fetch the index of that particular component and add a new child to the original object.

props:{
  index: Number
}
methods: {
  onclick(event) {
   // This line may change depending on how you pass 'items' into this component
    items[0].content[index].content = { newFea: 'Child3' }                               
 },
}

0👍

<button v-for="item in child2" @click="clickBtn(item)">
    {item.title}}
</button>

clickBtn(item){
    this.$set(item,'content',{ newFea: 'Child3'});
}

Leave a comment