Getting the value of a button using Vue.js

Question

I have a form that has three buttons and each need a value of 1, 2 and 3 respectively. They're placed in a form and the user is to click one of the three resulting in the form changing. I'm attempting to make an ajax call based upon the value of the button the user has pressed. I'm attempting this like so:

<form method="POST">
  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="content">
         <button class="btn btn-default btn-question" 
         v-model="selectedcategory"
         v-on="click: search" 
         value="1">Category 1
         </button>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="feature-content">
         <button class="btn btn-default btn-question" 
         v-model="selectedcategory" 
         v-on="click: search" 
         value="2">Category 2
         </button>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="feature-content">
         <button class="btn btn-default btn-question" 
         v-model="selectedcategory" 
         v-on="click: search" 
         value="3">Category 3
         </button>
      </div>
  </div>
</form>

My js looks like so

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#picker',

    data: {
        selectedcategory: '0'
    },

    methods:{

        search: function(e){
            e.preventDefault();

            var getresults = this.$http.get('api/products/' + this.selectedcategory, function(products){
                this.$set('products', products); //key, data
            });
        }
    }
});

Like this, I'm unable to get the value of the buttons but if I do a simple select drop down menu like so

<select v-model="selectedcategory" v-on="click: 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Then the ajax call is made successfully.

How can I achieve this same result but with buttons instead?

Answer 1

You may try the following

<form method="POST">
  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="content">
         <button class="btn btn-default btn-question"
         v-on="click: search(1, $event)">Category 1
         </button>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="feature-content">
         <button class="btn btn-default btn-question"  
         v-on="click: search(2, $event)">Category 2
         </button>
      </div>
  </div>

  <div class="col-md-4 col-sm-6 feature text-center">
      <div class="feature-content">
         <button class="btn btn-default btn-question"
         v-on="click: search(3, $event)">Category 3
         </button>
      </div>
  </div>
</form>

And in your js file

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#picker',

    methods:{

        search: function(id, e){
            e.preventDefault();

            var getresults = this.$http.get('api/products/' + id, function(products){
                this.$set('products', products);
            });
        }
    }
});