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

需要的效果是，點(diǎn)擊表格中的任意一格，那一格就渲染對(duì)應(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)點(diǎn)擊渲染出class，而點(diǎn)擊非第一列的時(shí)候，非第一列的所有l(wèi)i都渲染出這個(gè)class。

點(diǎn)擊第一列：
圖片描述

圖片描述

點(diǎn)擊第二列的隨便一格：
圖片描述

點(diǎn)擊非第一列的時(shí)候，consol.log(this.addClass)打印出來(lái)的是undefined，而點(diǎn)擊第一列的時(shí)候則不會(huì)。

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

回答

編輯回答

不討囍

我的思路是用二維矩陣的展現(xiàn)形式來(lái)看比較簡(jiǎ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)于每個(gè)格子都有一個(gè)獨(dú)立的id了, 點(diǎn)擊哪個(gè)就把對(duì)應(yīng)的行號(hào)與列號(hào)穿入, 然后再判斷

然后貼代碼

  <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: {
    //      穿入行號(hào)列號(hào)
      toggleActive (i, j) {
        this.addClass = i.toString() + j.toString()
        console.log(this.addClass)
      }
    }
  }

預(yù)覽圖

圖片描述

2017年3月31日 05:10

編輯回答

誮惜顏

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

// 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)在我們可以訪問(wèn)原生事件對(duì)象
    const $target = event.target
    $target.className = $target.className.indexOf('active') === -1 ? 'active' : ''
}

2018年9月5日 02:33