为什么 vue.js 组件没有设置 Data from 方法答案

【问题标题】：Why vue.js component is not set the Data from method为什么 vue.js 组件没有设置 Data from 方法
【发布时间】：2022-01-23 15:53:01
【问题描述】：

我成功地从 Axios 请求中获取数据。然后分配给数据用户，但它显示错误。类型错误：无法设置未定义的属性（设置“用户”）。

这是我的代码。

     <template>
        <div class="p-5">
    
            <h1 class="text-2xl mb-4">Certifly Live Video Chat </h1>
            <div id ="users">
            </div>
            <div id="myid" class="grid grid-flow-row grid-cols-3 grid-rows-3 gap-4 bg-black/]">
                <button class="btn btn-info" style="margin-right:5px" v-for="user in users" @click="getAccessToken(user.appt_room_name)" > 
                    {{user.appt_admin_name}} {{user.appt_date_time}}
                </button>
    
                <br><br>
                <div id="video-chat-window">
                </div> 
            </div>
    
        </div>
    </template>
<script>
         export default {
                name: 'video-chat',        
                data() {
                    return {
                        users:[]
                    };
                },         
                methods : {
                     userRequests: function(){
                        axios.post(`/api/user_requests`)
                        .then(function (response) {
                            console.log(response.data)
                            this.users = response.data.data;  
                        })
                        .catch(function (error) {
                            console.log(error);
                        }) 
                    }, 
        
        
                     
                },
                mounted : function () { 
                    this.userRequests();
                }
            }
</script>

控制台数据 [ { “身份证”：1， "appt_date_time": "03:00 - 03:15", “appt_admin_id”：15， "appt_admin_name": "Osana Shiraz", “appt_usr_id”：280965， "appt_usr_name": "哈姆扎设拉子", "appt_room_name": "RMX:280965", "created_at": "2021-12-21 14:50:59", “updated_at”：“2021-12-21 14:50:59” }, { “身份证”：3， "appt_date_time": "04:30 - 04:45", “appt_admin_id”：15， "appt_admin_name": "Osana Shiraz", “appt_usr_id”：280965， “appt_usr_name”：“等待”， "appt_room_name": "RMX:280965", "created_at": "2021-12-21 17:04:09", “updated_at”：“2021-12-21 17:04:09” }, { “身份证”：4， "appt_date_time": "05:15 - 05:30", “appt_admin_id”：15， "appt_admin_name": "Osana Shiraz", “appt_usr_id”：280965， “appt_usr_name”：“等待”， "appt_room_name": "RMX:280965", "created_at": "2021-12-21 17:06:50", “updated_at”：“2021-12-21 17:06:50” } ];

【问题讨论】：

当我将响应数据分配给 "this.users" 时。它给出错误类型错误：无法设置未定义的属性（设置“用户”）。
你也可以发布你的模板吗？
也是 'console.log(response.data) 输出
只是我想在 data() { return { users:[] }; 之后将 userRequset 分配给 users 数组}

标签： javascript laravel vue.js

【解决方案1】：

您在.then 回调中无权访问this。所以你试图在未定义的情况下为users 分配一些东西。 This article 解释了原因。尝试更改您的承诺回调以使用箭头函数，例如：

userRequests: function() {
  axios.post('/api/user_requests')
  .then(response => {
    console.log(response.data)
        this.users = response.data.data;
    })
    .catch(function (error) {
        console.log(error);
    }) 
}

【讨论】：

谢谢@Will F 它使用箭头函数对我有用

【解决方案2】：

如果不想使用arrow函数，也可以保存this引用，稍后在函数中使用。确保在axios 调用之前执行此操作。

userRequests: function() {
  let vm = this
  axios.post(`/api/user_requests`).then(function (response) {
    vm.users = response.data.data
  }).catch(function (error) {
    console.log(error)
  }) 
},

【讨论】：

【解决方案3】：

试试这个方法

export default {
  name: "videoChat",
  data() {
    return {
      users: [],
    };
  },
  methods: {
    async userRequests() {
      try {
        const { data } = await axios.post(`/api/user_requests`);
        this.users = data;
      } catch (error) {
          console.log('error', error)
      }
    },
  },
  mounted() {
    this.userRequests();
  },
};

【讨论】：

【解决方案4】：

分配给 users[] 只是 response.data 而不是 response.data.data 。这里有一个功能示例： https://codepen.io/jssDev-/pen/zYEExbq

【讨论】：