Vue.js v-bind class width condition

user_13729875 0
Viewed 218

I started working width Vue.js, and I would like to know how I can use conditions width v-bind This is my code (error) :

<input
  type="text"
  class="form-control"
  v-bind:class="{'is-invalid': step_1.project_url.error : 'is-valid'}"
  v-model="step_1.project_url.field"
  placeholder="Project url"
>
vue.js
2 Answers

The correct way of binding would be

<input
  type="text"
  class="form-control"
  v-bind:class="{'is-valid': (step_1.project_url.error !== '' && step_1.project_url.error === true), 'is-invalid': (step_1.project_url.error !== '' && step_1.project_url.error === false)}"
  v-model="step_1.project_url.field"
  placeholder="Project url"
>

This will work as per your requirement

user_112811520

Here you can find a playground that you can mess with and see how things work: https://codesandbox.io/s/how-to-bind-styles-lue1g?file=/src/App.vue

For more informations on how to bind classes, you can check the official documentation on the styling.

For reference, here is the kind of line that you wanted to achieve

<input
  type="text"
  :class="[valid === 'okay' ? 'bordered' : '', 'margined']"
  v-model="valid"
/>

PS: :class is a shorthand for v-bind:class !

user_88165850
Related