Passing both the value and index from a child component to a parent method is a

Question

Passing both the value and index from a child component to a parent method is a

After reading an answer on Stack Overflow, I was able to successfully pass a value from a child component to the parent and call a method in the parent using that value. However, my challenge is that the child components are generated dynamically with the use of v-for, and I also need to pass the index of each component to the method along with the value.

This is what I am aiming for:

<component v-for="(component, index) in components" :key="index" 
:is="component" :index="index" @title-change="setTitle(value, index)" />

If I simply use

@title-change="setTitle"

, the value gets passed correctly to the setTitle method without needing to explicitly provide it as a parameter.

However, I also want to include the index in the method call. Unfortunately, none of the following attempts seem to work:

@title-change="setTitle(value, index)"

@title-change="setTitle(index, value)"

@title-change="setTitle(index)"

It's worth mentioning that I am working with Vue 2.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

One way to create an object with index and title is by passing it to the parent:

Vue.component('Child', {
  template: `
    <div class="">
      <input v-model="title" />
      <button @click="titleChange">change</button>
      {{title}}
      {{index}}
    </div>
  `,
  props:['index'],
  data() {
    return {
      title: ''
    }
  },
  methods: {
    titleChange() {
      this.$emit('title-change', {idx: this.index, title: this.title})
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      components: ['child', 'child', 'child']
    }
  },
  methods: {
    setTitle(val) {
      console.log(val)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <component v-for="(component, index) in components" :key="index" 
:is="component" :index="index" @title-change="setTitle" />
</div>

Answer 2

One way to create an object with index and title is by passing it to the parent:

Vue.component('Child', {
  template: `
    <div class="">
      <input v-model="title" />
      <button @click="titleChange">change</button>
      {{title}}
      {{index}}
    </div>
  `,
  props:['index'],
  data() {
    return {
      title: ''
    }
  },
  methods: {
    titleChange() {
      this.$emit('title-change', {idx: this.index, title: this.title})
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      components: ['child', 'child', 'child']
    }
  },
  methods: {
    setTitle(val) {
      console.log(val)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <component v-for="(component, index) in components" :key="index" 
:is="component" :index="index" @title-change="setTitle" />
</div>

Passing both the value and index from a child component to a parent method is a

Answer №1

Similar questions

What is the best way to create a mock URL in axios for unit testing purposes?

Exploring the Concept of Constructor Interfaces in TypeScript

Tips on utilizing AngularJS $http for transferring multipart/form-data

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

What advantages does KnockoutJS offer over AngularJS?

Creating a modal component in VueJs integrated with Laravel

What is the proper location to place the .env file in a Vue3 CLI project?

Locate every instance of items in an array within a string

What is the reason behind Typescript flagging a potential undefined value when checking for array length using a greater than comparison but not with an

What are the functioning principles of older ajax file uploading frameworks (pre-html5)?

What is the best way to use jQuery AJAX to efficiently upload a file to a PHP page

Unpacking a props object results in an undefined value

I'm struggling to figure out the solution for this error message: "Unhandled Rejection (Type Error): Cannot read property 'filter' of undefined." Can someone please assist me with resolving this

Error: The DOM is throwing an uncaught TypeError because it cannot read the property 'children' of an undefined value

Conceal a div while revealing the other div

Tips for combining or adding duplicated values in a Javascript array

What is the process for transforming a JSON object format to another in node.js?

Issue with Foundation 6 not triggering the change.zf.slider event

What is the best method for establishing a page location during rendering/onload?

Retrieving an HTML page from one location and automatically populating textboxes with preexisting values on the receiving end