problems with having a vue component in for loop

Question

Please first take a look at following code:

<tr v-for="item in items">
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
   <td> <actions-manager :item="item" /> </td>
</tr>

As you can see I am including actions-manager component inside a for loop for each item.
In actions-manager I have following code :

<ul>
  <li v-for="action in item.actions">
    <a @click="initAction(action.name, item.id)" href="javascript:;">
      {{action.name}}
    </a>
    <a @click="someOtherMethod()" href="javascript:;">
      ...
    </a>
  </li>
</ul>

my data:

data : function() {
  return {
     currentActionName : null,
     currentItemId : null
  }
}

my methods :

methods : {
  initAction : function (actionName, itemId) {
    this.currentActionName = actionName;
    this.currentItemId = itemId;
  },
  someOtherMethod : function () {
     console.log(this.currentActionName, this.currentItemId);
  }
}

and now initAction method works completely fine for the first table row and sets currentActionName and currentItemId properly, but not for other rows.

for example :
when I call someOtherMethod after initAction in first table row I can access currentActionName and currentItemId and it works fine for first row, but for other rows initAction is not setting values for currentActionName and currentItemId.

any ideas why?

Answer 1

According to the structure of your code I guess these two components are similar to what you want:

parent component that has tr tags:

<template>
<section>
    <tr v-for="item in items">
        <td> <actions-manager :item="item" />
            item1
        </td>
        <td> <actions-manager :item="item" />
            item2
        </td>
        <td> <actions-manager :item="item" />
            item3
        </td>
        <td> <actions-manager :item="item" /> 
            item4
        </td>
        <td> <actions-manager :item="item" /> 
            item5
        </td>
    </tr>
</section>
</template>

<script>
import actionsManager from "@/components/actionsManager.vue";
export default {
    data() {
        return {
            items: [
                
                {
                    actions: {
                        action1: {
                            name: "first item",
                        },
                        action2: {
                            name: "second item",
                        },
                        action3: {
                            name: "third item",
                        } 
                    },
                    id: 1
                },

                {
                    actions: {
                        action4: {
                            name: "fourth item",
                        },
                        action5: {
                            name: "five item",
                        },
                        action6: {
                            name: "six item",
                        } 
                    },
                    id: 2
                },

            ]
        }
    },

    components: {
        actionsManager
    }
}
</script>

actionsManager component:

<template>
    <ul>
        <li v-for="action in item.actions">
            <a @click="initAction(action.name, item.id)" href="javascript:;">
            {{action.name}}
            </a>
            <a @click="someOtherMethod()" href="javascript:;">
            ...
            </a>
        </li>
    </ul>
</template>

<script>
export default {
    props: ["item"],
    data : function() {
        return {
            currentActionName : null,
            currentItemId : null
        }
    },

    methods : {
        initAction : function (actionName, itemId) {
            this.currentActionName = actionName;
            this.currentItemId = itemId;
        },
        someOtherMethod : function () {
            console.log(this.currentActionName, this.currentItemId);
        }
    }
}
</script>

And that works fine in my vue-cli development environment! I could not understand what is the problem. You can test those two component and see that console logs data correctly.