@click來自v-for的單個物件

我正在嘗試通過單擊從陣列內的物件鍵中獲取資料。我嘗試了幾種方法，但無法完成。任何幫助，將不勝感激。

這是我的資料：

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' },   
        ],
}]

我的 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="getItem(item)"
        ><v-icon size="25">mdi-domain</v-icon></v-btn>
          </td>
</tr>

所以基本上我試圖在回圈中獲取所選專案的陣列下的type值。types

uj5u.com熱心網友回復：

我不完全確定您要在這里實作什么。如果您嘗試在內部渲染每個物件types，顯示名稱然后在單擊時發送型別，您可以執行類似的操作。

<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>

uj5u.com熱心網友回復：

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>

腳本：

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
    },
  },

uj5u.com熱心網友回復：

我認為您提出的資料結構與您的模板不匹配。

您正在迭代 item.data ...但陣列中的每個專案都沒有資料屬性。

此外，在您的資料示例中顯示data = [].. 但在您顯示的模板中data.name- 資料陣列沒有屬性名稱。

因此，假設一個陣列data = []（items每個陣列都有一個 types 陣列），您需要同時迭代item in data ANDtype in item.types并將專案和型別都傳遞給處理函式：

<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>

標籤：javascript Vue.js

上一篇：Vue3-狀態不可用且未在Vuedevtools中顯示

下一篇：v-if-->props作為物件屬性