CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Mr. Wonderful
Mr. Wonderful

Reputation: 199

How can I update data object whenever changes happens inside v-for of child

How can I update data object of parent whenever changes happen inside v-for. I have a child component that I use inside parent component.

ParentComponent.vue

   <template>
       ....
       ....
    <child-component
      v-for="i in count"
      ref="childComponent"
      :key="i"
      currentPage="i"  // currentPage doesn't update.
      :page="i"
    />

      <q-header>
        {{currentPage}}  // always displays default value:1
      </q-header>

   </template>

    <script>
      data () {
         return {
            pageCount: 10,
            currentPage: 1,
          }

},

How can I update currentPage of data object whenever i changes inside v-for. I have tried using watch without much luck. I don't have access to child component and can't modify it.

Much appreciated!

Upvotes: 0

Views: 342

Answers (2)

Prebiusta
Prebiusta

Reputation: 479

you should look into Custom Events.

https://v2.vuejs.org/v2/guide/components-custom-events.html

Idea is, that whenever there is some update of your desire in child component, you can execute this.$emit(“change”), which will throw an event.

On parent side you can catch this event by @change=“myMethod” as one of the attributes.

methods: {
  myMethod() {
    console.log("Testing")
  }
}
<child-component
          v-for="i in count"
          ref="childComponent"
          :key="i"
          currentPage="i"
          :page="i"
          @change=“myMethod”
/>

Let me know if that helped.

Upvotes: 0

Ollie
Ollie

Reputation: 1435

There is some slight confusion with how v-for is working on the child-component here. Writing currentPage="i" as a property (which should actually be v-bind:currentPage in order for the i to be interpreted as JS) will simply declare the attribute on each child-component

How can I update currentPage of data object whenever i changes inside v-for

i doesn't "change" in the traditional context of running a for loop inside of a normal JavaScript application. In Vue, your rendering logic and application logic are separate, and rightly so, because running logic as part of the rendering doesn't really make sense.

For example, let's look at how your app will render the child-component:

<!-- Vue output -->
<child-component ... currentPage="1" />
<child-component ... currentPage="2" />
<child-component ... currentPage="3" />

So let's look at separating the rendering logic from the application logic.

I realise you don't have access to child-component, but based on the context I will assume it is some kind of tabbing functionality (based on you trying to set a value for the "current page" - feel free to be more specific and I can update my answer).

We need to bridge that gap between the rendering logic and the application logic and we can do that by using events:

<child-component
  v-for="i in count"
  :ref="`childComponent-${i}`" // ref should be unique so add the i as part of it
  :key="i"
  :page="i"
  v-on:click="currentPage = i" // when the user clicks this child component, the current page will be updated
/>

You may have to utilise a different event other than click but I hope this gets you closer to what you are trying to achieve. For the value of currentPage to update there has to be some kind of user input, so just find out which event makes the most sense. Maybe the child-component library you are using has custom events that are more appropriate.

Upvotes: 1

Related Questions