vue小白解决mounted()多次执行问题

咸鱼好头秃

已于 2023-11-30 13:26:43 修改

阅读量1.6k

点赞数 3

文章标签： vue.js 前端 javascript

于 2023-11-30 11:13:22 首次发布

本文链接：https://blog.csdn.net/qq_51172959/article/details/134707646

版权

<div class="page">
        <a href="" v-if="pageInfo.pageNum>1" @click="Num(pageInfo.pageNum-1)">上一页</a>
        <div class="navNum" style="display:inline-block;" v-for="num in pageInfo.navigatepageNums" :key="num">
            <a href="#" style="background-color:#96f;color:#fff;" v-if="num===pageInfo.pageNum">{{num}}</a>
            <a href="" v-else @click="Num(num)">{{num}}</a>
        </div>
        <a href="" v-if="pageInfo.pageNum<pageInfo.pages" @click="Num(pageInfo.pageNum+1)">下一页</a>
    </div>

点击页码时后台能拿到数据，但是mouted运行第二次，之前用jQuery写时也出现该问题，当时是没能阻止默认事件发生，猜想这里也是同种问题。开始查资料：

vue事件修饰符（阻止事件冒泡、阻止默认事件....）_vue event.preventdefault();-CSDN博客k

看到这位博主写的，我给页码点击时添加了@click.prevent 代码就成功了。

后续补充：a链接点击时必须添加阻止默认事件，不然跳转链接；

但是，button不会跳转，不需要阻止；除非按钮属性是type='submit'或者不写默认提交，需要时记得添加阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/Car/js/vue.js"></script>
    <script src="/Car/js/axios.min.js"></script>
    <link rel="stylesheet" href="/Car/css/index.css">
    <style>
        .center input {
            width: 20px;
        }

        .tip {
            height: 280px;
        }

        .tip span {
            width: 19%;
        }

        .tip select {
            outline: none;
            width: 65.5%;
            margin-left: 5px;
            margin-bottom: 20px;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="center">
    <form class="top">
        <input type="text" name="id" placeholder="请输入汽车ID" autocomplete="off" v-model="idKey">
        <input type="text" name="name" placeholder="请输入汽车名称" autocomplete="off" v-model="nameKey">
        <select name="ctNo" v-model="ctNoKey">
            <option value="">未选择汽车类型</option>
            <option :value="item.no" v-for="item in carTypeList">{{item.tName}}
            </option>
        </select>
        <button type="button" id="showUsers" @click="getCars(1)">查询</button>
    </form>
    <form class="center" v-on:submit.prevent>
        <button type="button" class="delAll">批量删除</button>
        <table cellspacing="0">
            <thead>
            <tr>
                <th width="7%"><input type="checkbox" name="cliAll" id="cliAll"></th>
                <th width="10%">汽车ID</th>
                <th>汽车名称</th>
                <th>汽车类型</th>
                <th width="15%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in pageInfo.list" :key="item.id">
                <td><input type="checkbox" name="cli" v-html="item.id"></td>
                <td v-html="item.id"></td>
                <td v-html="item.name"></td>
                <td v-html="item.tName"></td>
                <td>
                    <a href="" @click="Modify(item.id,item.name,item.ct_no)">修改</a>&nbsp;&nbsp;
                    <a href="" @click="Delete(item.id)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
    <div class="page">
        <a href="" v-if="pageInfo.pageNum>1" @click.prevent="Num(pageInfo.pageNum-1)">上一页</a>
        <div class="navNum" style="display:inline-block;" v-for="num in pageInfo.navigatepageNums" :key="num">
            <a href="#" style="background-color:#96f;color:#fff;" v-if="num===pageInfo.pageNum">{{num}}</a>
            <a href="" v-else @click.prevent="Num(num)">{{num}}</a>
        </div>
        <a href="" v-if="pageInfo.pageNum<pageInfo.pages" @click.prevent="Num(pageInfo.pageNum+1)">下一页</a>
    </div>
</div>
</body>
<script>
    new Vue({
        data() {
            return {
                pageInfo: [],
                carTypeList: [],
                idKey: '',
                nameKey: '',
                ctNoKey: '',
            }
        },
        methods: {
            getCarTypeList() {
                axios.get("/Car/carType/select").then(resp => {
                    this.carTypeList = resp.data
                })
            },
            getCars(pageNum) {
                axios.get("/Car/car/select", {
                    params: {
                        pageNum: pageNum,
                        id: this.idKey,
                        name: this.nameKey,
                        ctNo: this.ctNoKey
                    }
                }).then(resp => {
                    this.pageInfo = resp.data
                })
            },
            Modify(a, b, c) {
                console.log(a, b, c)
            },
            Delete(a) {
                console.log(a)
            },
            Num(n) {
                this.getCars(n)
            },
        },
        mounted() {
            this.getCarTypeList()
            console.log("getCars mounted")
            // 获取地址
            if (location.href.lastIndexOf("?") !== -1) {
                this.nameKey = location.href.split("=")[1]
            }
            this.getCars()
        }
    }).$mount('#center')
</script>
</html>

效果如下：

咸鱼好头秃

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue小白解决mounted()多次执行问题

点击页码时后台能拿到数据，但是mouted运行第二次，之前用jQuery写时也出现该问题，当时是没能阻止默认事件发生，猜想这里也是同种问题。看到这位博主写的，我给页码点击时添加了。
复制链接

扫一扫