qq_42638485
犹大的誓言
采纳率0%
2021-03-07 18:02

PC端Vue中,我这里的过滤器为什么会被@click触发,怎么解决?

 这是html代码,里面有两个@click事件@click="Clickshow()"    @click.stop="NegationIsshow(index)"(不可能是冒泡影响,而且我也加了.stop试了),还有一个过滤器<td>{{data.creatdate | data_change}}</td>

<div class="orderbox">
				<div class="orderdatabox">
					<div class="title">
						<span style="margin-left: 30px;">Orders</span>
						<div class="statusBox" :class="classobj" @click="Clickshow()" @mousedown="mousedown()" @mouseup="mouseup">
							<i class="iconfont iconshandian lefticon"></i>
							<span>Status</span>
							<i class="iconfont iconxiangxiajiantou righticon"></i>
						</div>
						<div class="clickBox" v-show="clickshow">
							<div class="clickable"><i></i>Accept Order</div>
							<div class="clickable"><i></i>Reject Order</div>
						</div>
					</div>
					
					<div class="orderdata">
						<div class="tablebox">
							<table cellpadding="0" border="0" cellspacing="0" class="table">
								<thead>
									<tr>
										<th>Order id</th>
										<th>Data</th>
										<th>Customer Name</th>
										<th>Location</th>
										<th>Amount</th>	
										<th>Status Order</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(data,index) in datalist" :key="data.ouid">
										<th>{{data.oid}}</th>
										<td>{{data.creatdate | data_change}}</td>
										<td>{{data.username}}</td>
										<td>{{data.address}}</td>
										<td><span>1</span></td>
										<td><span>{{data.state}}</span></td>
										<td>
											<div class="edit"><span  @click.stop="NegationIsshow(index)">...</span>
												<div v-show="index===tagetIndex&&isshow" class="edit_success">
													<div class="able"><i></i>Accept Order</div>
													<div class="able"><i></i>Reject Order</div>
												</div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

这里是我写的vue代码

var vm =new Vue({
				el:"#processcon",
				data:{
					datalist:[],
					tagetIndex: 1,
					isshow:false,//通过点击事件控制组件显示
					classobj:{
						statusClick:false,
						statusSuccess:false
					},
					clickshow:false//通过点击事件控制组件显示
				},
				methods:{
//获取后台数据
					sentajax(){
						axios.get('http://localhost:8081/OrdersData/getAllOrderdata').then(res =>{
							console.log("发送ajax",res);
							this.datalist = res.data.orders
							console.log(this.datalist.length)
						}) 
					},
					NegationIsshow(index){
						if(this.tagetIndex ===index){
							this.isshow = !this.isshow
						}else{
							this.tagetIndex =index
							this.isshow = true
						}
						return false
					},
					mousedown(){
						this.classobj.statusClick = true
					},
					mouseup(){
						this.classobj.statusClick = false
					},
					Clickshow(){
						this.clickshow = !this.clickshow
						return false
					}
				},
				//自动触发写入的函数
				mounted:function (){
					this.sentajax()
				},
				filters:{
					data_change(value){
						var data = value.slice(0,10)+" "+ value.slice(11,19)
						console.log(value)
						return data
					}
				}
			})

我的问题就是,触发那两个点击事件后,我发现浏览器的控制台会打印3编结果,我很疑惑,为什么点击事件还会触发过滤器,请大佬为我解惑,讲述其中的细节。

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • TexvView 流转的年华 1月前

    这个没有把js部分的代码贴出来不好判断,定义过滤器应该和methods平级。不知道是不是这个的原因。

    点赞 评论 复制链接分享
  • guochunle_g 一颗菠萝头 8天前

    大佬解决了么?遇到了同样的问题

    点赞 评论 复制链接分享

为你推荐