почему условный рендеринг не работает для ввода формы в vuejs

Question

У меня есть форма с вариантами выбора:

        <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>&nbsp;</span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
            </label>
        </div>

, и на основе вышеуказанного выбора я хочу отобразить содержимое заголовка:

               <div v-if="{department} === 'Medicine'">
                    <h1>Option A</h1>
                </div>
                <div v-else>
                    <h1>Option B</h1>
                </div>

, но каждый раз вариант Bполучать вывод.

Answer 1

Я думаю, что директива 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>&nbsp;</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>