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>

当我点击按钮时，我想从输入类型文件，输入类型文本和输入类型复选框中获取值

我知道使用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

示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在点击按钮时获得价值？ Vue.js 2

2 个答案: