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