CODEWITHSUNDEEP
vue.jsvuejs2vue-component
moses toh
moses toh

Reputation: 13192

How can I get value when button clicked ? Vue.js 2

My component vue is like this :

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

When I click the button, I want get value from input type file, input type text and intput type checkbox

I know use javascript or jquery

But I want to get it use vue.js 2

How can I do it?

Upvotes: 1

Views: 19403

Answers (2)

PenAndPapers
PenAndPapers

Reputation: 2108

use v-model in your form

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

EDITED:

try to look into this example for file inputs, hope it'll help you http://codepen.io/Atinux/pen/qOvawK/

Upvotes: 0

Robin Huy
Robin Huy

Reputation: 1100

With checkbox and text input, you can use v-model. With file input you can get data when user upload image, use event onChange

Example code:

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>

Upvotes: 2

Related Questions