CODEWITHSUNDEEP
javascriptvue.js
Jackson J
Jackson J

Reputation: 1523

Setting value in Vue.js select gives `undefined` value

When Vue component receives update via websocket it sets new value for <select>.

Related code:

window.VueBus.$on("updated", (channel, key, value) => {
  let selfChannel = "model." + self.model + "." + self.pk;
  if (channel === selfChannel) {
    if (self.key === key) {
      console.log("Set " + key + " to " + value);
      self.input.off("change");
      console.log("off handler");
      self.value = value; // when I set value here error happens
      self.$nextTick(() => {
        self.input.on("change", this.onInputChange);
        console.log("on handler");
        self.initInput(true);
      });
    }
  }
});

I've added a watch function:

watch: {
  value: function (old, newv) {
    console.log('old-new');
    console.log(old)
    console.log(newv)
  }
},

This is what it gives to me when I open two browser windows and make a change in one of them:

old-new
19
# it is just an empty string
old-new
undefined
19

But I see that the correct value is passed into the component:

Set recommender_id to 19
off handler # it is required because onInputChange makes requests to server

Error on console:

TypeError: Cannot read property 'length' of undefined

It is because of this line in template:

<div v-bind:class="{'floating-label-form-group-with-value': value.length > 0}">

In another window (where I make change) everything is fine.

Upvotes: 0

Views: 3955

Answers (1)

Jackson J
Jackson J

Reputation: 1523

Solution is simple: https://github.com/vuejs/vue/issues/4524

v-model on <select> sets the value to undefined if the <select> is lacking the matching <option>

Upvotes: 0

Related Questions