勾选不同radio显示不同input框

Question

我想在点击已在库中的按钮之后，下方显示一个输入框，输入数量，如果点击未在库中，就显示更多input框，请问我要怎么写呢？

<el-form-item label="添加方式">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-radio border size="mini" @change="existenceChange(existence)">
                      已在库中
                    </el-radio>
                    <el-radio border size="mini" @change="existenceChange(existence)" >
                      未在库中
                    </el-radio>
                  </div>
                </el-col>
              </el-form-item>

Answer 1

参考GPT和自己的思路：您可以根据点击的不同radio来显示不同的输入框，在existenceChange()方法中根据传入的existence参数来判断是点击了哪个radio，然后使用v-if或v-show来切换输入框的显示。例如：

<el-form-item label="添加方式">
  <el-col :span="24">
    <div class="grid-content bg-purple">
      <el-radio border size="mini" @change="existenceChange('inStock')" v-model="existence">
        已在库中
      </el-radio>
      <el-radio border size="mini" @change="existenceChange('notInStock')" v-model="existence">
        未在库中
      </el-radio>
    </div>
  </el-col>
</el-form-item>
<el-form-item label="数量" v-show="existence === 'inStock'">
  <el-input v-model="quantity"></el-input>
</el-form-item>
<el-form-item label="更多信息" v-show="existence === 'notInStock'">
  <el-input v-model="moreInfo"></el-input>
</el-form-item>

在data中定义existence、quantity和moreInfo属性，并在existenceChange()方法中对它们进行赋值或清空等操作即可。