[Vuejs]-Conditionally disabling text boxes using Vue

by

0👍

✅

Try this instead:

<input v-model="form.levelOfPlay" :disabled="!sportTeamSchool.length" class="input" type="text" placeholder="Text">

A computed property would work as well. But in this case it is unnecessary and is just more code then needed.

0👍

Just add and Exclamation mark.
I think this will work just fine.

new Vue({
  el: "#app",
  data: {
    form: {
    sportTeamSchool:"",
    levelOfPlay:""
    }
  },
  methods: {
  
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="field">
      <label class="label">Sport / team / school:</label>
        <div class="control">
          <input v-model="form.sportTeamSchool" class="input" type="text" placeholder="Text">
        </div>
    </div>  

    <div class="field">
      <label class="label">Level of play:</label>
        <div class="control">
          <input 
            v-model="form.levelOfPlay" 
            class="input" 
            type="text" 
            placeholder="Text"
            :disabled="!form.sportTeamSchool"
            >
        </div>
    </div> 
</div>

Leave a comment