[Vuejs]-How can I add class="required" in the following select v-model?

by

0👍

As it mentioned in Vue.JS docs you can use v-bind:class to achieve what you wanted:

<select v-model="value.from" v-bind:class="{required: isRequired}">

which required is data, computed field in your app/component.

Update 1:

    new Vue({
    el: "#myApp",
    data: {
        // you should define a variable in your data
        isRequired: false
    },
    methods: {
        doSomething: function(){
            this.isRequired = true;
        }
    }
});

0👍

The required attribute is a boolean (an not a class). You don’t need to give it a value; if it is present in the select tag, the select is required.

You can also bind it to a boolean value to change whether the select is required.

new Vue({
  el: '#app',
  data: {
    isRequired: false
  }
});
[required] {
  outline: thin solid red;
}
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <select required>
    <option>An option</option>
  </select> This one is always required
  <div>
    <select :required="isRequired">
     <option>Whatever</option>
    </select>
    <input type="checkbox" v-model="isRequired"> Is Required: {{isRequired}}
  </div>
</div>

Leave a comment