使用 Vue.js 获取按钮的值

Question

我有一个包含三个按钮的表单，每个按钮分别需要一个值 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 下拉菜单

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

那么ajax调用就成功了。

如何使用按钮来实现相同的结果？

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

使用 Vue.js 获取按钮的值

Getting the value of a button using Vue.js

laravel

vue.js