使用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>