為什么vue.js組件沒有設定Datafrom方法

我成功地從 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>

控制臺資料 [ { "id": 1, "appt_date_time": "03:00 - 03:15", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": " Hamza Shiraz", "appt_room_name": "RMX:280965", "created_at": "2021-12-21 14:50:59", "updated_at": "2021-12-21 14:50:59" }, { "id": 3, "appt_date_time": "04:30 - 04:45", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": "awais", " appt_room_name": "RMX:280965", "created_at": "2021-12-21 17:04:09", "updated_at": "2021-12-21 17:04:09" }, { "id": 4 ,"appt_date_time": "05:15 - 05:30", "appt_admin_id": 15, "appt_admin_name": "Osana Shiraz", "appt_usr_id": 280965, "appt_usr_name": "awais", "appt_room_name": "RMX" 280965", "created_at": "2021-12-21 17:06:50", "updated_at": "2021-12-21 17:06:50" } ];

uj5u.com熱心網友回復：

您無權訪問this您的.then回呼。所以你試圖users在 undefined 上分配一些東西。 這篇文章解釋了原因。嘗試更改您的承諾回呼以使用箭頭函式，例如：

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

uj5u.com熱心網友回復：

如果不想使用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)
  }) 
}, 

uj5u.com熱心網友回復：

試試這個方法

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();
  },
};

uj5u.com熱心網友回復：

分配給users[]justresponse.data和 not response.data.data。這里有一個功能示例：https : //codepen.io/jssDev-/pen/zYEExbq

標籤：javascript 拉拉维尔 Vue.js

上一篇：節點是否需要更改？

下一篇：帶有雙[[]]資料的javacsript陣列映射