这是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编结果，我很疑惑，为什么点击事件还会触发过滤器，请大佬为我解惑，讲述其中的细节。

知未知味

用split 切割字符串为什么不管用呢

16条回答

为你推荐