Vue: Having a default value for a select box

[JosephSilber]

With the old options on a select, setting the model to null selected the default option.

Now that we have to manually loop to create the options, setting the model to null doesn't select the default anymore:

http://jsfiddle.net/02o7umoo/

Now it must be set to an empty string. Ugh!

[simplesmiler]

@jdavidberger put the :value="null" on the default option.

[JosephSilber]

@simplesmiler then it won't work with an empty string (doesn't make sense in the simple fiddle there, but it's something that can crop up in a lot of situations).

The old options handled them both gracefully.

[yyx990803]

If you want null, then bind the value to null. If you want empty string, then set the value to an empty string. The current behavior is more explicit.

Think about it: even '' == null evaluates to false in JavaScript. I don't think being loose is necessarily more graceful.

[uptownhr]

@yyx990803 I know this is an old post but seems :value="null" is not being evaluted to null but ''. Is this the expected behavior?

The typeof console.log is returning String from the example below.

<template>
  <form @submit.prevent="$emit('submit')">
    <label class="label">Parent Node</label>
      <span class="select">
        <select @change="updateValue('parent', $event.target.value)" :value="value.parent">
          <option :value="undefined"></option>
          <option v-for="node in parent_nodes" :value="node._id">{{node.label}}</option>
        </select>
      </span>

    <label class="label">Node Label</label>
    <input type="text" class="input" v-model="value.label">

    <label class="label">Description</label>
    <textarea v-model="value.description" class="textarea"></textarea>
    <button class="button">{{action}}</button>
  </form>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['value', 'action', 'parent_nodes'],
    methods: {
      updateValue (key, value) {
        console.log(typeof value)
        if (!value) value = null

        let new_value = {
          ...this.value,
          [key]: value
        }
        console.log(key, value)
        this.$emit('input', new_value)
      }
    }
  }
</script>

[davidkhess]

@yyx990803, I'm seeing a related problem – since v-bind doesn't apply the attribute at all if it is "falsey", the value attribute ends up being left off of the option. I'm seeing the following set the model to undefined instead of null when the default option is selected.

                <select id="status-select" 
                        v-model="status_filter">
                    <option :value="null">all</option>
                    <option value="pending">pending</option>
                    <option value="queued">queued</option>
                    <option value="sent">sent</option>
                    <option value="receipt">receipt</option>
                </select>

It's rendering like this:

                <select id="status-select">
                    <option>all</option>
                    <option value="pending">pending</option>
                    <option value="queued">queued</option>
                    <option value="sent">sent</option>
                    <option value="receipt">receipt</option>
                </select>

Note, I'm on Vue 1.0.24 for this particular project.

[davidkhess]

I just checked and :value="null" does indeed work on the latest version of Vue. So, it appears to have been a regression fixed somewhere between 1.0.24 and the latest release.

[Ethan0007]

if you assigned to :value="null" it will evaluate to string "null" in parameters .net mvc.

i expect null value , not "null". do you have any solution on this?

Thanks.

[megacromulent]

if you assigned to :value="null" it will evaluate to string "null" in parameters .net mvc.
...
i expect null value , not "null". do you have any solution on this?

I am having the same issue with null. I had to use :value="undefined"

[fidahasan]

love you @simplesmiler

[maprangsoft]

With the old options on a select, setting the model to null selected the default option.

Now that we have to manually loop to create the options, setting the model to null doesn't select the default anymore:

http://jsfiddle.net/02o7umoo/

Now it must be set to an empty string. Ugh!

it work for me thank you.