динамический ввод не скрывает ввод при начальной загрузке

Я новичок в vue 2.5 и застрял в проблеме, когда пользователь нажимает v-select. Я могу выполнять динамический ввод, но моя проблема в том, что при загрузке страницы (изначально) я хочу скрыть ввод, т.е. ввод должен быть виден только тогда, когда пользователь нажимает v- выбрать любой вариант

 <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 
   }
 }
}

Вторая проблема заключается в том, как я получу значение динамического ввода для функции изменения, поскольку v-модель не работает для динамического ввода


vuejs2 v-select
person Rocky    schedule 21.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Изменение срабатывает при начальной загрузке, если имеет начальное значение: https://github.com/sagalbot/vue-select/issues/345

Предложение: чтобы предотвратить срабатывание, просто удалите начальное значение, используя selected: null, в данных.

Вторая проблема... значения не меняются.

Поскольку вы хотите <input type="text" v-model="field.sensitive">, объявите поле, которое вы хотите использовать в v-model при нажатии:

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

Демо:

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>

person acdcjunior    schedule 21.03.2018
comment
спасибо за ответ, это работает, но все еще мало проблем, например, если вы выберете foo или bar, тогда у нас будет значок креста, если я нажму на него, он все равно создаст ввод, и последняя проблема заключается в том, что он выдает, как Невозможно прочитать свойство «чувствительный» из неопределенного здесь изменить () { console.log(это.поле.чувствительно)} - person Rocky; 21.03.2018