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

Hello.vue

main.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&nbsp; mounted() {&nbsp; &nbsp; const covers = document.getElementsByTagName("article")&nbsp; &nbsp; for (let i = 0; i < covers.length; i++) {&nbsp; &nbsp; &nbsp; covers[i].addEventListener("click", gotoftr)&nbsp; &nbsp; }&nbsp; &nbsp; function gotoftr(e) {&nbsp; &nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; &nbsp; let bg = e.target.style.background.slice(5, -2)&nbsp; &nbsp; &nbsp; let ftr = document.getElementById("album")&nbsp; &nbsp; &nbsp; let ftrcover = ftr.getElementsByTagName("img")**[0]**&nbsp; &nbsp; &nbsp; ftrcover.src = bg&nbsp; &nbsp; &nbsp; console.log(bg)&nbsp; &nbsp; }&nbsp; }此外，在vue内我不太喜欢大量的js操作，包括这样去绑定click事件，是完全可以用vue的事件处理去做的。这样可能会在组件通信上占用一部分时间，但是这也可能是说明你的组件划分不够好。至于实时页内搜索，如果state或是data中有数据的话就确定字段进行匹配，如果没有就先检索出你要进行匹配的信息。