避坑12_axios请求到mock数据渲染不到视图层

ParadoxLin

已于 2022-03-11 16:23:30 修改

阅读量994

点赞数

分类专栏：走过的坑文章标签： vue.js 前端 ajax

于 2022-03-11 16:15:59 首次发布

本文链接：https://blog.csdn.net/linxwx/article/details/123426578

版权

本文讲述了在Vue项目中遇到axios请求到mock数据无法渲染到视图层的问题及其原因。问题主要是由于JavaScript限制，Vue无法检测数组和对象的变化。解决方案包括使用Vue.set或vm.$set方法向对象添加响应式属性，以及利用Vue提供的数组变异方法如push、pop、shift等确保视图更新。

摘要由CSDN通过智能技术生成

一、问题

在Fastmock上mock数据，通过axios发送get请求数据存放到数组中，控制台可以打印出来，但就是渲染不上去，不知道什么原因

Vue代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in nameArr" :key="index">{
  { item }}</li>
    </ul>
    {
  { nameArr }}
  </div>
</template>

<script>
import axios from "axios";
export default {
    
  data() {
    
    return {
    
      baseUrl:
        "https://www.fastmock.site/mock/a2de7b065c65387ab6c6ab6b5fe95086/lsj/api/test",
      nameArr: [