使用 Vue.js 获取按钮的值答案

【问题标题】：Getting the value of a button using Vue.js使用 Vue.js 获取按钮的值
【发布时间】：2016-01-03 04:16:48
【问题描述】：

我有一个包含三个按钮的表单，每个按钮分别需要 1、2 和 3 的值。它们被放置在一个表单中，用户将单击三个导致表单更改的一个。我正在尝试根据用户按下的按钮的值进行 ajax 调用。我正在尝试这样：

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

我的 js 看起来是这样的

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

像这样，我无法获得按钮的值，但如果我像这样做一个简单的选择下拉菜单

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

那么ajax调用就成功了。

我怎样才能实现相同的结果，但使用按钮代替？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你可以试试下面的

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

在你的 js 文件中

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

【讨论】：