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

Question

我是 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" ]

Answer 1

我会向“其他”复选框添加一个值，且仅在选择此时，才会显示输入字段。

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

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

 v-model="other"

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

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

Answer 2

尝试如下代码片段：

 new Vue({ el: '#demo', data() { return { choices: ['Facebook', 'Instagram', 'Twitter'], selected: [], isDisabled: true, other: '' } }, methods: { onclick() { this.isDisabled = !this.isDisabled if(this.selected.length) { this.selected = this.selected.filter(s => s !== this.other) } this.other = '' }, addType() { this.selected.push(this.other) } } }) Vue.config.productionTip = false Vue.config.devtools = false

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div class="form-group"> <label class="required"> Social Media </label> <li v-for="(item, i) in choices" :key="i"> <input type="checkbox" :value="item" v-model="selected" :id="item"> <label :for="item">{{ item }}</label> </li> <input type="checkbox" v-on:click="onclick" > <input type="text" class="form-control" :disabled='isDisabled' v-model="other"> <button v-show="!isDisabled" @click="addType">+</button> <span class="mt-3">Selected: <strong>{{ selected }}</strong></span> </div> </div>