Why vue.js component is not set the Data from method-CodePudding

I successfully get data from an Axios request. then assign to data users but it show error. Type Error: Cannot set properties of undefined (setting 'users').

here is my code.

     <template>
        <div >
    
            <h1 >Certifly Live Video Chat </h1>
            <div id ="users">
            </div>
            <div id="myid" >
                <button  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>

console data [ { "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" } ];

CodePudding user response：

You don't have access to this in your .then callback. So you're trying to assign something to users on undefined. This article explains the reason why. Try changing your promise callback to use an arrow function, such as:

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

CodePudding user response：

If you don't want to use arrow function, you can also save this reference and use it later in the function. Make sure to do this before the axios call.

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

CodePudding user response：

Try this way

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

CodePudding user response：

Assign to users[] just response.data and not response.data.data . Here you have a functional example: https://codepen.io/jssDev-/pen/zYEExbq