CODEWITHSUNDEEP
vue.js
jedi
jedi

Reputation: 2198

VueJS show multiple input fields conditionally

I have a 'Add' button which adds a select box and when I select a value in the select box I want to display an input field so every time I click 'Add' it should show a select box and when I select a value in it I would like to display an input field.

I know I could use a flag 'selected' but when I already add one select box this would change the flag to true and show the input field immediately after I click 'Add' but I want the input field to show only when a value is selected.

<template>
    <button @click="onBtnClick">Add<button>
    <select>...</select> # This gets added when 'Add' button is clicked
    <input v-if="selected" type="text" /> # This should show when a value is selected.
<select>
</template>

data(){
    return {
       selected: false
  }
},
methods: {
  onValueSelected(){
    this.selected = true
  }
}

Do you have any ideas how I could accomplish this?

Upvotes: 0

Views: 1842

Answers (2)

Yom T.
Yom T.

Reputation: 9180

Use v-for and push new fields onto the collection at will.

new Vue({
  el: '#app',

  data() {
    return {
      goods: []
    }
  },

  methods: {
    addSelect() {
      let item = {
        id: this.goods.length,
        menus: [
          { value: '', text: '- select -' },
          { value: 1, text: 'Item 1' },
          { value: 2, text: 'Item 2' },
          { value: 3, text: 'Item 3' }
        ],
        input: {
          show: false
        }
      };

      this.goods.push(item);
    },
    
    showInput(item, e) {
      item.input.show = e.currentTarget.selectedIndex > 0;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="addSelect">Add to cart</button>

  <div v-for="item in goods" :key="item.id" class="goods">
    <select @change="showInput(item, $event)">
      <option 
        v-for="opt in item.menus" 
        :key="opt.key"
        value="opt.value">
        {{opt.text}}
      </option>
    </select>
    
    <input v-if="item.input.show" type="text" value="0" />
  </div>

</div>

Upvotes: 1

jedi
jedi

Reputation: 2198

I figured out that I can render a new component and pass it props. Everytime a new component is rendered it gets selected flag as false by default and I can change it then by selecting a value in the select box.

<b-form-group 
    v-if="element.elementName === 'Some value'"
    label="Select field *:"
    label-for="benefitSelectField">
    <SalaryField :element="element" />
</b-form-group>

SalaryField component

<template>
  <div>
    <select @change="onValueSelected" ></select>
    <input v-if="selected" type="text" />       
  </div>
</template>
<script>
  export default {
    props: {
      element: Object
    },
    data(){
      return {
        selected: false,
      }
    },
    methods: {
      onValueSelected() {
        this.selected = true
      }
    }
  }
</script>

Upvotes: 0

Related Questions