使用 Vue 有条件地禁用文本框

Question

当运动/团队/学校：文本框中没有写入任何内容时，我想禁用比赛级别：文本框。我怎样才能做到这一点？    <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">        </div>    </div> 我尝试过使用<input v-model="form.levelOfPlay" :disabled="sportTeamSchool == ''" class="input" type="text" placeholder="Text">有条件地禁用它但无济于事，这似乎是我在网上可以找到的唯一选择。我的代码是否有问题不允许这种情况发生？

Answer 1

试试这个：

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

计算属性也可以工作。但在这种情况下，这是不必要的，只是需要更多的代码。

Answer 2

只需添加感叹号即可。我认为这会很好用。

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>