前端vue方法中无法正常赋值给data如何解决

在用vue-admin-template的时候发现，data中的数据无法正常接收methods传的值，都会变成{ob: Observer}，这样前端页面就不能正常输出值了。

如何让其可以正常显示

<template>
  <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
 
    <span v-for="li in list">{{ list.name }}span>
    <span> namespan>  
      el-table-column>
 
template>
 
<script>
 
import { getPageList } from '@/api/user'
 
export default {
    data(){
        return{
            list: null,
            name: ''
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            getPageList()
                        .then(response => {
                            this.list = response.data.list
                            this.name = this.list.prodName
                            
                            
                            console.log(this.name)
                            console.log(this.list)
                            console.log(response)
                        })
        }
    }
}
script>
 
<style>
 
style>

控制台输出结果：

后端传输的数据在postman和浏览器（换成get方法的话）中都是正常的数据：

• 建议你看下这篇博客👉 ：vue中使用data中的数据a给赋值给另外一个变量b，改变a或b的值，另一个对象也变化的解决方法

因为你list赋值的是一个数组不是对象 ,至于name的赋值你可以直接this.name=this.list[0].prodName

 <span v-for="li in list">{{ li.prodName}}</span>
<span>{{name}}</span>