VueJS有条件地显示输入字段

Question

我有一个“添加字段”按钮，当我单击它时，会显示一个带有多个预定义选项的选择框。

现在，如果在选择字段中选择的值等于“ Hello”，那么我想在此选择框下方显示另一个选择框，否则显示一个输入字段，但我正在努力实现这一目标。

现在，我的代码如下：

<div v-for="option in folder.salary.fields" :key="option.id">
    <b-form-group label="Select field" label-for="salaryOptionField">
       <select
                v-model="folder.salary.fields.name"
                value-field="id"
                @change="onOptionSelected"
        >
            <option :value="null" disabled>Select type</option>
            <option v-for="(type, key) in salaryFields" :value="key">
                {{ salaryFields[key] }}
            </option>
        </select>
        <template v-if="folder.salary.fields.name === 'Hello'">
            <b-form-group label="Name" label-for="name">
                <input type="text"
                       name="name"
                       v-model="folder.salary.benefits.a"
                       required/>
            </b-form-group>
        </template>
    </b-form-group>
</div>

<b-btn @click="addNewSalaryField" variant="primary">Add Field</b-btn>

addNewSalaryField(){
    this.folder.salary.fields.push({
        name: '',
          amount: ''
             })
}

data() {
     return {
        folder: {
          pages: [],
             salary: {
               fields: [],
               benefits: []
             }
           }
        }
    }

现在，如果我从选择字段中选择“ Hello”，则什么也不会发生。感谢您的帮助。