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

问题描述

问 题

組件結構是這樣的

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

Hello.vue

  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")
      ftrcover.src = bg
      console.log(bg)
    }
  }

main.vue(要綁定的article的background)

    <section class="display_list">
      <div v-for="album in loadalbums">
        <article :style="{background:'url('+album.cover+')'}" class="cover"></article>
        <p class="li_info">{{ album.title }}</p>
      </div>
    </section>

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建置的

感謝各位大大了

解决方案

先解决下当前问题再说改进
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中有数据的话就确定字段进行匹配，如果没有就先检索出你要进行匹配的信息。

这篇关于javascript - 為v-for的資料綁定click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！