@click individual object from v-for

Admin 1
Viewed 55

I'm trying to get the data from an object key inside an array with a click. I tried few ways but couldn't get it done. Any help would be appreciated.

This is my data :

data:[{
name:aaa,
mail:abc@gmail.com
 types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' },   
        ],
},
{
name:bbb,
mail:def@gmail.com
 types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' },   
        ],
}]

And my html part :

  <tr v-for="(data, index) in item.data" :key="index">
  <td class="text-center">
      {{ data.name }}
    </td>
      <td class="text-center">
       <v-btn icon @click="getItem(item)"
        ><v-icon size="25">mdi-domain</v-icon></v-btn>
          </td>
</tr>

so basically I'm trying to get the type value under types array of the selected item in the loop.

vue.js javascript
4 Answers

I'm not entirely sure what you're trying to achieve here. If you're trying to render each object inside types, displaying the name and then sending the type when clicked, you can do something like this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app"></div>

<script>
  new Vue({
  methods: {
    getType(type) {
      //do whatever
      console.log(type)
    }
  },
    data: () => ({ data:[{
    name:"aaa",
    mail:"abc@gmail.com",
    types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' }   
        ]
    },
    {
    name:"bbb",
    mail:"def@gmail.com",
    types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' }   
        ]
    }] 
    }),
    template: `
    <table>
    <tr v-for="item in data">
    <td v-for="type in item.types" @click="getType(type.type)">
     {{type.name}}
    </td>
    </tr>
    </table>
    `
  }).$mount('#app');
</script>

<style>
td {
    cursor: pointer;
    padding: 5px 7px;
    border: 1px solid black;
    margin: 5px;
}
</style>

user_173175140

html:

<tr v-for="(data, index) in item.data" :key="index">
      <td class="text-center">
        {{ data.name }}
      </td>
      <td class="text-center">
        <v-btn icon @click="getTypes(data.types)"
          ><v-icon size="25">mdi-domain</v-icon></v-btn
        >
      </td>
    </tr>

script:

data() {
    return {
      item: {
        data: [
          {
            name: "aaa",
            mail: "abc@gmail.com",
            types: [
              { name: "1", type: "a" },
              { name: "2", type: "b" },
              { name: "3", type: "c" },
            ],
          },
          {
            name: "bbb",
            mail: "def@gmail.com",
            types: [
              { name: "1", type: "a" },
              { name: "2", type: "b" },
              { name: "3", type: "c" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    getTypes(types) {
      let blankTypes = types.map((type) => type.type);
      console.log(blankTypes);
      // access types here
    },
  },
user_134835160

I think your data structure you proposed and your template don't match.

You are iterating item.data ... but there is no data property for each item in the array.

Additionally, in your data sampe you show data = [] .. but in your template you show data.name - the data array doesn't have a property name.

So assuming an array data = [] of items (each which has a types array), you need to iterate both the item in data AND the type in item.types and pass BOTH the item and the type to the handler function:

<tr v-for="(item, index) in data" :key="index">
      <td class="text-center">
        {{ item.name }}
      </td>
      <td class="text-center">
        <template v-for="type in item.types">
          <v-btn icon @click="getTypes(item, type)">
            <v-icon size="25">mdi-domain</v-icon></v-btn>
      </td>
    </tr>
user_35272770

Fixed it by sending the index of object along with the item

<v-btn icon @click="getItem(item)"

Admin1
Related