动态输入在初始加载时不隐藏输入

Question

我是 vue 2.5 的新手，当用户点击 v-select 时遇到问题我可以动态输入，但我的问题是，当页面加载（最初）时，我想隐藏输入，即只有当用户点击 v-select 任何选项

时，输入才应该可见

 <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-model 不适用于动态输入

Answer 1

on-change 将在初始加载时触发如果它有一个初始值： https://github.com/sagalbot/vue-select/issues/345

建议：为了防止触发，只需将数据中使用selected: null,的初始值去掉即可。

Second problem is... values not changing.

既然要<input type="text" v-model="field.sensitive">，那么push的时候在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>

动态输入在初始加载时不隐藏输入

dynamic input not hide input at initial load

vuejs2

v-select