為v-for的資料綁定click事件

Question

組件結構是這樣的app.vue - Hello.vue - [footer.vue , main.vue]我想將main.vue 之中的所有article都綁定click事件(而article都是由v-for渲染),click 之後獲取article的background換至 footer.vue的 #album > img 的圖片(src)會更換, play-icon 也會 更換成 pause-icon所以我先實作更換圖片的部分, 將綁定的事件放在Hello.vueHello.vuemain.vue(要綁定的article的background)footer.vue(要置換的img)<span id="album"><img></span>但現在點擊的狀況, 都抓的到圖片的路徑也成功slice成了src內的路徑格式, 也沒有報錯, 但好像抓不到#album > img 照理來說是放置在父組件的應該都抓的到子組件的元素?console.log(ftrcover) 的結果卻是[img, src: "/static/img/artistt.0eb1587.jpg"] (算正確)請教各位大大該如何解決? 還是有什麼方向可以給小弟找尋的嗎? 或是有比for處理效能更好更正確的方式? 有理解錯誤的地方也請大大們指點網上查了很多資料vuex文檔也看了一遍還是無法想出解法目前的想法是覺得可能是hook用錯, 以及可能是組件關係沒搞懂? 如果是組件的關係的話, 應該要用eventBus還是prop處理, 還是使用vuex呢? 我有想過再main.vue之中return 處理過後的 url 給footer動態變更src, 但這方法不知道如何下手, 也不知道可不可行......之後要做實時頁內搜索, 有大大很有經驗的話也可以分享給小弟這個專案是用vue-cli+vuex+vue-router+webpack建置的感謝各位大大了

Answer 1

先解决下当前问题再说改进

getElementsByTagName获取到的是一个元素节点的集合(类数组)，所以最后获取img元素得取0

  mounted() {

    const covers = document.getElementsByTagName("article")

    for (let i = 0; i < covers.length; i++) {

      covers[i].addEventListener("click", gotoftr)

    }

    function gotoftr(e) {

      e = e || window.event;

      let bg = e.target.style.background.slice(5, -2)

      let ftr = document.getElementById("album")

      let ftrcover = ftr.getElementsByTagName("img")**[0]**

      ftrcover.src = bg

      console.log(bg)

    }

  }

此外，在vue内我不太喜欢大量的js操作，包括这样去绑定click事件，是完全可以用vue的事件处理去做的。这样可能会在组件通信上占用一部分时间，但是这也可能是说明你的组件划分不够好。

至于实时页内搜索，如果state或是data中有数据的话就确定字段进行匹配，如果没有就先检索出你要进行匹配的信息。