How do I get my select box on vue jS to show a placeholder / default message?-CodePudding

I have been searching for a while and no answers appear to help, so apologies if this feels like a duplicate.

I am creating a wedding website, and require an RSVP option. I am using a select box, and would like to set a default placeholder so the user knows what the field is for (I am not using labels so please do not suggest this.

Here is my code:

            <select v-model="attending" name="attending" id="attending" placeholder="Please choose" required>
                <option value="" disabled selected>RSVP here</option>
                <option v-for="option in options" v-bind:value="option.id">
                    {{ option.name }}
                </option>
            </select>
            <template v-if="attending === 1">
                <textarea name="message" v-model="message" cols="30" rows="5"
                    placeholder="Please mention any dietary requirements you may have">
                </textarea>
                <p>We would also love for you to have a say on what music plays to get you on the dancefloor. Please
                    feel free to suggest 1 or 2 options below:</p>
                <input type="text" v-model="songone" name="songone" placeholder="Your first song choice">
                <input type="text" v-model="songtwo" name="songtwo" placeholder="Your second song choice">
                <p>Finally, can you please enter the password found on your invitation before submitting:</p>
                <input type="password" v-model="password" name="password" placeholder="Enter password" required>
            </template>


data() {
    return {
        enteredPassword: '',
        errorMessage: '',
        attending: "RSVP",
        options: [
            { id: 1, name: 'I will be there' },
            { id: 2, name: 'Sadly, I am unable to attend' }
        ]
    }
},

I thought using the disabled or selected attr would solve but no luck.

Can someone please show me the really easy way that this will work?

CodePudding user response：

You just need to initialize your v-model of attending to the value of your placeholder option which you've set as empty string ("")

data() {
  return {
    attending: ""
  }
}

CodePudding user response：

As @yoduh Suggested, As we are using v-model directive on select to bind the value of selected option. In the same way we can bind the default value by just assigning the v-model data value.

<option value="RSVP" disabled>RSVP here</option>

Live Demo :

new Vue({
  el: '#app',
  data: {
    attending: "RSVP",
    options: [
      { id: 1, name: 'I will be there' },
      { id: 2, name: 'Sadly, I am unable to attend' }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="attending" name="attending" id="attending" placeholder="Please choose" required>
    <option value="RSVP" disabled>RSVP here</option>
    <option v-for="option in options" v-bind:value="option.id">
      {{ option.name }}
    </option>
  </select>
</div>