鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue中用v-for渲染出表格，如何使點擊的那格渲染出class？

vue中用v-for渲染出表格，如何使點擊的那格渲染出class？

需要的效果是，點擊表格中的任意一格，那一格就渲染對應(yīng)的class，其他的格子不渲染該class。

html是這樣的：

<ul v-for="(d, i) in day">
    <li v-for="(item, index) in d" @click="getItem(item, index, i)" :class="{ active: addClass == [i][index] }">
        {{ item.text }}
    </li>
</ul>

js是這樣的：

export default {
    data() {
      return {
          addClass: ''
      }
    },
    methods: {
        getItem: function (item,i,index) {
            this.addClass = [i][index]
        }
    }
 }

這樣的話只有第一列的li能夠?qū)崿F(xiàn)點擊渲染出class，而點擊非第一列的時候，非第一列的所有l(wèi)i都渲染出這個class。

點擊第一列：
圖片描述

圖片描述

點擊第二列的隨便一格：
圖片描述

點擊非第一列的時候，consol.log(this.addClass)打印出來的是undefined，而點擊第一列的時候則不會。

這是為什么呢？應(yīng)該如何解決這個問題？

回答
編輯回答
不討囍

我的思路是用二維矩陣的展現(xiàn)形式來看比較簡明

00 01 02 03 04 05 06 
10 11 12 13 14 15 16
20 21 22 23 24 25 26
30 31 32 33 34 35 36
40 41 42 43 44 45 46
50 51 52 53 54 55 56

相當(dāng)于每個格子都有一個獨立的id了, 點擊哪個就把對應(yīng)的行號與列號穿入, 然后再判斷

然后貼代碼

  <table>
    <tr v-for="(trItem, trIndex) in tableData">
      <td :class="{active: addClass===trIndex.toString()+tdIndex.toString()}" :data-id="trIndex.toString()+tdIndex.toString()" v-for="(tdItem, tdIndex) in trItem.td" @click="toggleActive(trIndex,tdIndex)">{{tdItem}}</td>
    </tr>
  </table>
  export default {
    data () {
      return {
        addClass: '',
        tableData: [
          {
            td: [11, 12, 13, 14, 15, 16, 17, 18, 19]
          },
          {
            td: [21, 22, 23, 24, 25, 26, 27, 28, 29]
          },
          {
            td: [31, 32, 33, 34, 35, 36, 37, 38, 39]
          },
          {
            td: [41, 42, 43, 44, 45, 46, 47, 48, 49]
          },
          {
            td: [51, 52, 53, 54, 55, 56, 57, 58, 59]
          },
          {
            td: [61, 62, 63, 64, 65, 66, 67, 68, 69]
          }
        ]
      }
    },
    methods: {
    //      穿入行號列號
      toggleActive (i, j) {
        this.addClass = i.toString() + j.toString()
        console.log(this.addClass)
      }
    }
  }

預(yù)覽圖

clipboard.png

clipboard.png

圖片描述

2017年3月31日 05:10
編輯回答
誮惜顏

可以使用在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件來完成所需功能：

// HTML
<ul class="parent" v-for="(d, i) in day">
    <li v-for="(item, index) in d" @click="getItem($event)">
        {{ item.text }}
    </li>
</ul>

// JS
getItem(event) {
    // 現(xiàn)在我們可以訪問原生事件對象
    const $target = event.target
    $target.className = $target.className.indexOf('active') === -1 ? 'active' : ''
}
2018年9月5日 02:33