使用vue3+axios和后端交互时无法改变的data中的数据

最新推荐文章于 2024-08-13 19:07:43 发布

haohulala

最新推荐文章于 2024-08-13 19:07:43 发布

阅读量419

点赞数

分类专栏：前端学习笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/haohulala/article/details/130034341

版权

前端学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天在编写前端页面的时候，打算引入axios进行ajax请求，可以在这个过程中遇到了一个非常大的坑，先来看看有坑的代码

我们看一下浏览器端的console的打印情况

可以看到，第二次打印this.msg的时候我们拿到了一个空值。

这个问题我真的处理了非常久，后来发现这种写法在then()里面是没有办法拿到this的，解决的办法在下面这篇文章。

(14条消息) Vue之数组赋值_vue定义数组并赋值_ljljlj1993的博客-CSDN博客

说起来也非常简单，实际上就是在then()里面将函数的形式修改为=>的形式。

这样写就可以拿到数据了。

下面贴一下完整的代码，代码非常简单，就是和后端交互，将查询出来的数据在渲染到页面上。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纳米搜索</title>


    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    

</head>
<body>

<div class="container">
    <!-- 先编写一个搜索栏 -->
    <div class="row" id="app">
        <div class="col-md-1"></div>
        <div class="col-md-10">

            <!-- 这里面有两个个部分 -->
            <div class="row">
                <!--<div class="col-md-2"></div>-->
                <div class="col-md-12">
                    <div style="float: left; margin-top: 20px;margin-left: 20%">
                        <h2 style="color:cornflowerblue">纳米搜索</h2>
                    </div>
                    <div style="float: left; margin-top: 20px; margin-left: 20px">
                        <div class="form-group" style="margin-right: 20px; float: left;" >
                            <div class="input-group" >
                                <input type="text" class="form-control" name="keyword"  id="keyword" placeholder="请输入要搜索的关键词">
                            </div>
                        </div>
                        <div style="float:left">
                            <button id="search" type="button" class="btn btn-primary" v-on:click="search">搜索</button>
                        </div>
                    </div>
                </div>
                <!--<div class="col-md-2"></div>-->
            </div>
            <hr>

            <div>
                <div v-for="item of msg">
                    <!-- 第一行是url -->
                    <a :href="item.url" target="_blank">
                        <div style="color: #0000cc">{{item.title}}</div>
                    </a>
                    <div style="color: #28a745">{{item.url}}</div>
                    <!-- 这一行显示文章作者 -->
                    <div style="color: #000000">文章作者：<span style="color: #000000; margin-left: 10px">{{item.author_name}}</span></div>
                    <!-- 这一行显示标签 -->
                    <div style="color: #000000">文章标签：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div>
                    <!-- 下面一行显示发表时间，阅读数和收藏数 -->
                    <div>
                        <div style="color: #000000">发表时间：<span style="color: #000000;margin-left: 10px">{{item.up_time}}</span></div>
                        <div style="color: #000000;float: left">阅读量：<span style="color: #000000;margin-left: 10px">{{item.read_volum}}</span></div>
                        <div style="color: #000000;float: left; margin-left: 10px">收藏量：<span style="color: #000000;margin-left: 10px">{{item.collection_volum}}</span></div>
                    </div>
                    <br>
                    <hr>
                </div>
            </div>

        </div>
        <div class="col-md-1"></div>
    </div>

</div>
</body>
<script type="text/javascript">
    Vue.createApp({
        data()  {
            return {
                msg : [{
                            "author_name": "weixin_68829137",
                            "collection_volum": 31,
                            "read_volum": 747,
                            "tag": "spring java ",
                            "title": "Spring事务详解",
                            "u_id": 50,
                            "up_time": "2023-03-21",
                            "url": "https://blog.csdn.net/weixin_68829137/article/details/129687454"
                        }, {
                            "author_name": "chenxiong103",
                            "collection_volum": 5,
                            "read_volum": 4605,
                            "tag": "javascript LayUI ",
                            "title": "layui.table动态获取表头和列表数据示例",
                            "u_id": 115,
                            "up_time": "2020-07-11",
                            "url": "https://blog.csdn.net/chenxiong103/article/details/107290133"
                        }, {
                            "author_name": "qq_36785719",
                            "collection_volum": 2,
                            "read_volum": 7151,
                            "tag": "JavaScript 前端 ",
                            "title": "layui实现表格行拖拽，列拖拽等表格操作 -----layui-soul-able",
                            "u_id": 111,
                            "up_time": "2020-07-03",
                            "url": "https://blog.csdn.net/qq_36785719/article/details/107101554"
                        }, {
                            "author_name": "weixin_42334518",
                            "collection_volum": 2,
                            "read_volum": 2838,
                            "tag": "java ",
                            "title": "layui的使用，layui的soulTable的史诗级坑",
                            "u_id": 108,
                            "up_time": "2020-10-15",
                            "url": "https://blog.csdn.net/weixin_42334518/article/details/109093503"
                        }, {
                            "author_name": "u013733643",
                            "collection_volum": 3,
                            "read_volum": 1133,
                            "tag": "javascript html ",
                            "title": "layui数据表格实现重载数据表格功能(搜索功能）",
                            "u_id": 114,
                            "up_time": "2023-01-30",
                            "url": "https://blog.csdn.net/u013733643/article/details/128806705"
                        }, {
                            "author_name": "weixin_45477086",
                            "collection_volum": 1,
                            "read_volum": 1241,
                            "tag": "spring java ",
                            "title": "Spring事务详解与使用",
                            "u_id": 69,
                            "up_time": "2022-05-05",
                            "url": "https://blog.csdn.net/weixin_45477086/article/details/122234635"
                        }],
                code : 200
            }
        },
        methods: {
            search() {
                // 拿到待搜索的关键词
                var keyword = document.getElementById("keyword").value;
                console.log(keyword);
                var url = "http://localhost:8080/csdn/search/" + keyword + "/1";
                console.log(url);
                axios.get(url).then((response) => {
                    this.msg = response.data.msg;
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
    }).mount("#app");
</script>


</html>

我也没有去深究这里面的原理，不过真的是个大坑。