javascript - 如何根据选中的复选框激活文本框并使用 Vue js 和 javascript 中的 v-model 从文本框中获取值？

问题描述

我是 Vue js 的新手。我正在尝试为 API 的其余部分做一个动作表单，但我被困在这一点上。

我的行动形式：

<div class="form-group">
   <label class="required"> Social Media </label>
   <b-form-checkbox value="Facebook" v-model="selected"> FaceBook </b-form-checkbox>
   <b-form-checkbox value="Instagram" v-model="selected"> Instagram </b-form-checkbox>
   <b-form-checkbox value="Twitter" v-model="selected"> Twitter </b-form-checkbox>
   <b-form-checkbox v-on:click="onclick()" v-model="selected" > Other:</b-form-checkbox>
      <input type="text" class="form-control" :disabled='isDisabled'>
   <span class="mt-3">Selected: <strong>{{ selected }}</strong></span>
</div>

我的 Vue 实例

export default {
    data() {
        return {     
            selected: []     
        };
    }

我的输出：

使用输入值“朋友”选中“其他”复选框时的预期输出：

Selected: [ "Facebook", "Instagram", "Twitter", "Friends" ]

标签： javascripthtmlvue.jscheckbox

我会在“其他”复选框中添加一个值，并且只有在选中它时才显示输入字段。

:disabled="!selected.includes('Other')"

然后添加第二个状态变量并将其设置为 v-model 到输入。

 v-model="other"

您也可以尝试添加 'other'-String 添加您的 'selected' 数组的末尾，但我认为这会更加混乱。

我已经编辑了我的代码框以通过添加计算值来获得想要的输出。

我制作了一个代码框来展示我的解决方案： https ://codesandbox.io/s/funny-zhukovsky-id7vg?file=/src/App.vue

javascript - 如何根据选中的复选框激活文本框并使用 Vue js 和 javascript 中的 v-model 从文本框中获取值？

问题描述

解决方案

推荐阅读