vue.js - vue 一个方法绑定到两个元素上 判断触发源

问题描述

问 题

搜索功能 热词和历史都能点击搜索 任何一个单独都行 但是判断event就出错 现在这样写 热词保存到state的searchKey是错的 点击热词不能实现搜索

<div class="hotTag">
            <p>热门搜索</p>
            <ul>
                    <li class="s1" v-for="(song,index) in this.$store.state.hotList" v-on:click="search(index,$event)">
                         <router-link to="/mine/searchPage/searchResult">{{song.songname}}
                          </router-link>
                    </li>
            </ul>

        </div>
        <div class="historyTag">
           <ul>
                <li class="history">搜索历史</li>
                <li class="clearhistory" v-on:click="clearHistory">清空历史</li>
           </ul>
            <ul>
                <li class="s2" v-for="(item,index) in this.$store.state.searchArr"  v-on:click="search(index,$event)">
<!--                   不包住整个是为了能点击删除 不然跳转-->
                    <router-link to="/mine/searchPage/searchResult">
                       <span class="itemName">{{item}}</span>
                    </router-link>
                       <span class="deleteIcon"><img v-on:click="deleteHistory(index)" src="../img/playimg/close(2).svg"></span>
                    
                </li>
              
<!--
                <li >张敬轩</li>
                <li class="deleteIcon"><img src="../img/playimg/close(2).svg"></li>
-->
            </ul>
        </div>

 search:function(index,event){
                if($(event.target).hasClass('s1')){
                     this.$store.state.searchKey=this.$store.state.hotList[index].songname
                }
                else if($(event.target).hasClass('s2')){
                    this.$store.state.searchKey=this.$store.state.searchArr[index]
                }
                console.log(this.$store.state.searchKey)
                this.$http.get('https://route.showapi.com/213-1?keyword='+this.$store.state.searchKey+'&page=1&showapi_appid=33605&showapi_timestamp=&showapi_sign=06407a004abc491d9b04d32bbcee27c9',).then(function (response) {
                    // 这里是处理正确的回调
                    this.$store.state.list = response.body.showapi_res_body.pagebean.contentlist;
                this.$store.state.playminishow=true
                })
                
                //保存搜索历史到localstorage
                this.$store.state.searchArr.unshift(this.$store.state.searchKey)
                this.$store.state.searchArr=removeDuplicatedItem(this.$store.state.searchArr)

            },

解决方案

要判断不同触发源，可以用 $event 参数进行判断，你这里用 class 应该是没问题的

也可以把事件绑定的内联语句加上另一个常量参数(比如叫 source)，彻底数据驱动，脱离 DOM 元素的判断

vuex 中的 state 赋值应使用 mutation 进行，不要直接修改

这篇关于vue.js - vue 一个方法绑定到两个元素上 判断触发源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！