为什么条件渲染不适用于 vuejs 中的表单输入
why is conditional rendering not working for form input in vuejs
我有一个带有 select 选项的表格:
<div>
<select>
<option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
并且基于上面的selection我想显示header内容:
<div v-if="{department} === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
但每次都会输出选项B。
我认为 v-model
指令应该在 select
元素中。你可能打算这样做..
<div>
<select v-model="department">
<option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
在这种情况下您也不需要解构。所以你可以直接在相等比较中使用 department
..
<div v-if="department === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
我有一个带有 select 选项的表格:
<div>
<select>
<option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
并且基于上面的selection我想显示header内容:
<div v-if="{department} === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>
但每次都会输出选项B。
我认为 v-model
指令应该在 select
元素中。你可能打算这样做..
<div>
<select v-model="department">
<option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">{{n}}</option>
</select>
</div>
<div class="alignBtn">
<label><span> </span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
</label>
</div>
在这种情况下您也不需要解构。所以你可以直接在相等比较中使用 department
..
<div v-if="department === 'Medicine'">
<h1>Option A</h1>
</div>
<div v-else>
<h1>Option B</h1>
</div>