使用 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&nbsp;v-model="form.levelOfPlay"&nbsp;:disabled="!sportTeamSchool.length"&nbsp;class="input"&nbsp;type="text"&nbsp;placeholder="Text">计算属性也可以工作。但在这种情况下，这是不必要的，只是需要更多的代码。

Answer 2

只需添加感叹号即可。我认为这会很好用。new Vue({&nbsp; el: "#app",&nbsp; data: {&nbsp; &nbsp; form: {&nbsp; &nbsp; sportTeamSchool:"",&nbsp; &nbsp; levelOfPlay:""&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp;&nbsp;&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <div class="field">&nbsp; &nbsp; &nbsp; <label class="label">Sport / team / school:</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="control">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input v-model="form.sportTeamSchool" class="input" type="text" placeholder="Text">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; <div class="field">&nbsp; &nbsp; &nbsp; <label class="label">Level of play:</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="control">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="form.levelOfPlay"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="input"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :disabled="!form.sportTeamSchool"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;</div>