VUE中<a>标签里调用v-on:click发送axios请求

主要用于实现下载、导出功能。后端传递流,而不是blob对象。

<a>标签的href不为false,且绑定的click向后台发送axios请求实现。

这里使用@click不启作用。
调用顺序为先click后跳转链接。
href填写的是后端传递流的url

例子:
html部分:

<a class="el-button--primary" href="www.baidu.com" v-on:click="hello()">
hello
</a>

js部分:

hello(){
	             this.$http({
		            url: '',
		            method: 'post',
		            data: {
			            
		            }
	            }).then(res => {
		            console.log(res);
	            });
            }
<template> <div class="cart"> <div class="good-list" v-if="list.length > 0"> <div class="goods" v-for="data in list" :key="data._id"> <van-checkbox class="checkbox" v-model="data.checked" /> <img class="goods-img" alt="" :src="data.product.coverImg" /> <div class="goods-info"> <p>{{ data.product.name }}</p> <span>{{ data.product.price }}</span> <!-- <span>-</span> {{ data.quantity }} <span>+</span> --> <!-- 步进器 --> <van-stepper v-model="data.quantity" disable-input /> </div> </div> <!-- <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit"> <van-checkbox v-model="checked">全选</van-checkbox> </van-submit-bar> --> </div> <div v-else>购物车没有数据了</div> <!-- 全选 --> <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit"> <van-checkbox v-model="checked">全选</van-checkbox> <!-- <van-icon name="delete-o" v-show="checked" @click="dels" /> --> </van-submit-bar> </div> </template> <script> import axios from "axios"; import { reqCart } from "../../api/user"; export default { data() { return { list: [], }; }, computed: { //监听数据变化,返回数据结果 //全选或全不选 checked: { //表示修改checked的状态 set(flag) { console.log(flag); //动态给vue添加属性this.$set,this.$set给vue对象添加动态属性 this.list.map((item) => this.$set(item, "checked", flag)); }, //通过 this.$set 方法向列表项 item 动态添加属性 checked,并将其值设置为 flag,即选或取消选。 get() { if (this.list.length == 0) { return false; } else { return ( this.list.length == this.list.filter((item) => item.checked).length ); } }, }, }, watch: {}, methods: { async getcartlist() { //请求购物车的数据 const result = await reqCart(); console.log(result); this.list = result; //调用购物车数据列表 }, //点击提交生成订单 onSubmit() {}, //修改数据 }, created() { this.getcartlist(); }, mounted() {}, components: {}, }; </script> <style scoped> .good-list { padding-bottom: 50px; } .goods { display: flex; height: 100px; /* justify-content: space-around; */ align-items: center; margin-bottom: 15px; border-bottom: 1px solid #ccc; } .goods img { width: 80px; height: 80px; display: block; } .checkbox { width: 50px; } .van-stepper { float: right; padding-right: 20px; } .goods-info { flex: 1; } </style>根据这个代码怎么弄
05-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值