0

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

4

1 回答 1

1

如果它具有初始值，则on-change 将在初始加载时触发： 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>

于 2018-03-21T16:16:46.693 回答