Value in console.log and query string is different

Question

Vuejs beginner here, I have this Reservation System that checks out availability with CheckIn, CheckOut, and RoomCapacity using a datepicker and two number inputs (one for Adult and one for kids) and using axios.get to get the values. The CheckIn and CheckOut works fine, but the RoomCapacity stays none in the query string params but when console logging, it shows the value. Here's The console.log and the query string params

Here's the Vue code:

<b-tab title="Search Rooms" :disabled="step !== 0">
            <div class="date">
              <p>Pick a date:</p>
              <!-- <date-picker v-model="time1" valueType="format" range ></date-picker>  -->
              <HotelDatePicker
                format="DD/MM/YYYY"
                @check-in-changed="updateCheckIn($event),searchCheckIn($event)"
                @check-out-changed="updateCheckOut($event), searchCheckOut($event)"
              ></HotelDatePicker>
            </div>
            <div class="guestCount">
              <p>Number of adults:</p>
                    <InputNumber :max="14" :min="1" v-model="bookForm.AdultCount" size="large"></InputNumber>
              <br />
              <p>Number of kids:</p>
                    <InputNumber :max="10" :min="0" v-model="bookForm.KidCount" size="large"></InputNumber>
              <br />
            </div>
            <br/>
            <b-button
              @click="step = 1; searchRooms(); check(); totalGuest();"
              variant="primary"
            >Check Available Rooms</b-button>
          </b-tab>

The data:

searchForm:{
                    CheckInDate:'',
                    CheckOutDate:'',
                    RoomCapacity:'',
                },

The method:

searchRooms(){
                axios.get("http://localhost:3000/searchRooms",{
                    params:{
                        CheckInDate: this.searchForm.CheckInDate,
                        CheckOutDate: this.searchForm.CheckOutDate,
                        RoomCapacity: this.searchForm.RoomCapacity,
                    }       
                })
                .then((res)=>{
                  if(res.data[0]){
                    // no problem
                    if(res.data[1].length){
                      //rows retrieved
                      this.roomList=res.data[1]
                      this.notice=""
                      this.err_msg=""
                    }else{
                      //no matching row
                      this.notice="No rooms found"
                      this.roomList=[]
                      this.err_msg=""
                    }
                  }else{
                    this.err_msg = res.data[1]
                    this.roomList=[]
                    this.notice=""
                  }
                })
                .catch((err)=>{
                    this.err_msgP="AJAX error"
                    this.PalacioRooms=[]
                    this.noticeP=""
                })
            },
totalGuest(){
                let totalGuest = this.bookForm.KidCount + this.bookForm.AdultCount;
                this.searchForm.RoomCapacity = totalGuest.toString();
            },
check(){
                console.log(this.searchForm)
            },

I tried making the RoomCapacity to 0 but same problem, it just stays zero.

You print the object but the console will only evaluate the contents of that object when you *expand* it. So, you don't get the state of the object when logged, you get the *current state*. If you've updated it in the mean time (and you seem to have done it), there would be a difference. — VLAZ, Jan 30 '20 at 13:27

score 0 · Answer 1 · edited Jul 15 '22 at 05:19

I don't have enough information about your code to tell this for sure but in most cases if console.log shows another value than Vue itself seems to know it is because of a value change not recognized by Vue's getters and setters in the current JS event cycle. This can happen if you use own class instance method outside of the Vue context to change an instance's properties. It's better explained in the docs: https://v2.vuejs.org/v2/guide/reactivity.html

To fix this you should be fine using the $set command to trigger Vue's reactivity manually.

Value in console.log and query string is different

1 Answers1