dynamic input not hide input at initial load

Question

I m new to vue 2.5 and stuck in problem when user click on v-select I m able to dynamic input but my problem is that when page load (initially) i want to hide input i.e input should visible only when user click on v-select any option

 <v-select v-model="selected" :on-change="addRow" :options="['foo','bar']"></v-select>
 <div class="input-group" v-for="field in fields" v-if="fields.length > 1">
     <input type="text" v-model="field.sensitive"> 
  </div>
 <button type="submit" class="btn btn-sm btn-primary" @click.prevent="change"><i class="fa fa-dot-circle-o"></i> Submit</button> 
export default {
 name: 'List Purches',
 data(){
  return{
    selected :'foo',
      fields: []
  }
},
methods:{
  addRow: function() {
      this.fields.push({ });
    },
   change(){
    console.log(this.field.sensitive)//this not work i.e it dynamic input value
  //here how i get value of dynamic input 
   }
 }
}

second problem is that how i will get dynamic input value on change function since v-model not working for dynamic input

score 1 · Accepted Answer · answered Mar 21 '18 at 16:16

The on-change will trigger on the initial loading if it has a an initial value: https://github.com/sagalbot/vue-select/issues/345

Suggestion: to prevent the triggering, just remove the initial value using selected: null, in the data.

Second problem is... values not changing.

Since you want <input type="text" v-model="field.sensitive">, declare the field you want to use in v-model when pushing:

this.fields.push({sensitive: null});

Demo:

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: "#app",
  name: 'List Purches',
  data() {
    return {
      selected: null,
      fields: []
    }
  },
  methods: {
    addRow: function() {
      this.fields.push({sensitive: null});
    },
    change() {
      console.log(this.field.sensitive) //this not work i.e it dynamic input value
      //here how i get value of dynamic input 
    }
  }
});

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-select@latest"></script>

<br><br>

<div id="app">

  <v-select v-model="selected" :on-change="addRow" :options="['foo','bar']"></v-select>
  <hr>
  <div class="input-group" v-for="field in fields">
    <input type="text" v-model="field.sensitive"> {{ field.sensitive }}
  </div>
  <button type="submit" class="btn btn-sm btn-primary" @click.prevent="change">
    <i class="fa fa-dot-circle-o"></i>Submit
  </button>

</div>

thanks for reply it work but still few issue like if you select foo or bar then we have cross icon if i click on that then it still create input and last issue is that it throw like Cannot read property 'sensitive' of undefined over here change() { console.log(this.field.sensitive) } — Rocky, Mar 21 '18 at 16:42

dynamic input not hide input at initial load

1 Answers1