如何根据选中的复选框激活文本框并在 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: []     
        };
    }

我的输出：

当 'Other' 的复选框被选中且输入值为 'Friends' 时的预期输出：

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

Answer 1

我会在 'other' 复选框中添加一个值，只有在选中此复选框时，才会显示输入字段。

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

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

 v-model="other"

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

我编辑了我的 codesandbox，通过添加一个计算值来获得想要的输出。

我制作了一个codesandbox来展示我的解决方案： 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>

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

How to activate textbox depending on checkbox checked and get values from textbox using v-model in Vue js and javascript?

html

javascript

checkbox

vue.js