@click individual object from v-for-CodePudding

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:[email protected]
 types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' },   
        ],
},
{
name:bbb,
mail:[email protected]
 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 >
      {{ data.name }}
    </td>
      <td >
       <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.

CodePudding user response：

html:

<tr v-for="(data, index) in item.data" :key="index">
      <td >
        {{ data.name }}
      </td>
      <td >
        <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: "[email protected]",
            types: [
              { name: "1", type: "a" },
              { name: "2", type: "b" },
              { name: "3", type: "c" },
            ],
          },
          {
            name: "bbb",
            mail: "[email protected]",
            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
    },
  },

CodePudding user response：

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:"[email protected]",
    types: [
            { name: '1', type: 'a' },
            { name: '2', type: 'b' },
            { name: '3', type: 'c' }   
        ]
    },
    {
    name:"bbb",
    mail:"[email protected]",
    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>