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

Question

在用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> name</span>  
      </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方法的话）中都是正常的数据：

Answer 1

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