点击按钮后，我怎样才能获得价值？ Vue.js 2

Question

我的组件VUE是这样的：

<template> 
    <div class="modal" tabindex="-1" role="dialog"> 
     ... 
     <div class="form-group"> 
      <input type="file" id="change-image" name="replace"> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" id="alt-image"> 
     </div> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox"> Set 
      </label> 
     </div> 
     ...    
     <button type="button" class="btn btn-success" @click="editImageProduct"> 
      {{trans('store.modal.edit.button.save')}} 
     </button> 

     ... 
    </div> 
</template> 
<script> 
    export default{ 
     ... 
     methods: { 
      editImageProduct(event) { 
       // get the data 
      } 
     } 
    } 
</script> 

当我按一下按钮，我想要得到的输入类型的文件，输入型文本和intput型复选框值

我知道使用JavaScript或jQuery的

但我想要得到它使用vue.js 2

我该怎么办呢？

Answer 1

使用v-model表单中的

<input type="file" id="change-image" name="replace" v-model="file"> 
<input type="text" class="form-control" id="alt-image" v-model="text"> 
<input type="checkbox" v-model="checkbox"> 

export default { 
    data: function(){ 
     return { 
      file: null, 
      checkbox: null, 
      text: null, 
     } 
    }, 
    methods: { 
     editImageProduct() { 
      console.log(this.file, this.checkox, this.text); 
     } 
    } 
} 

编辑：

试图寻找到这个例子文件输入，希望它会帮助你http://codepen.io/Atinux/pen/qOvawK/

Answer 2

使用复选框和文本输入，你可以使用v-model。 随着文件的输入，你可以得到数据，当用户上传图片，使用事件onChange

示例代码：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    image: '', 
 
    altImage: '', 
 
    set: false, 
 
    }, 
 
    methods: { 
 
    onUpload(e) { 
 
     this.image = e.target.files || e.dataTransfer.files; 
 
    }, 
 
    editImageProduct() { 
 
     console.log('File object', this.image); 
 
     console.log('Image name', this.image[0].name); 
 
     console.log('Alt Image', this.altImage); 
 
     console.log('Set', this.set); 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <div class="form-group"> 
 
    <input type="file" @change="onUpload"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <input type="text" class="form-control" v-model="altImage"> 
 
    </div> 
 
    
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" v-model="set"> Set</label> 
 
    </div> 
 

 
    <button type="button" class="btn btn-success" @click="editImageProduct">Save</button> 
 
</div>