CODEWITHSUNDEEP
laravelvue.js
Mistiqe
Mistiqe

Reputation: 37

Get data from DB based on selected values. Vue.js + laravel

I have a table with bank deposits wich contains the next rows: 

        currency | period | percents.

On frontend i have 2 select fields and 1 input:

            <select name="currency" class="form-control" v-model="currency">
                <option>USD</option>
                <option>EUR</option>
            </select>

            <select name="period" class="form-control" v-model="period">
                <option>6</option>
                <option>12</option>
                <option>24</option>
            </select>

        <input class="form-control" type="text"  value="@{{ percents }}" v-model="percents">

So I need to get a percents value into input field depending on these selected options. For example user selects USD and 12 monts, and automatically appears percentages for selected options. If somebody will provide just a simple example would be very happy.

Upvotes: 0

Views: 13155

Answers (2)

mul14
mul14

Reputation: 388

You can use computed properties and ajax call. Everytime user change the option, the percent in text box will re-evaluate. Here the example using VueJS and vue-resource.

new Vue({

  el: '#app',

  data: {
    currency: '',
    period: '',
  },

  computed: {
    percents() {

      var url = "/get_percent/" + this.currency + '/' + this.period;

      this.$http.get(url, function(response){
        return response.percents;
      });

      return this.currency + ' - ' + this.period;
    }
  }

});

Here the snippet http://jsbin.com/qorovo/edit?html,js,output

From the Laravel side, you could return simple JSON

Route::get('/get_percent/{currency}/{period}', function($currency, $period) 
{
    return App\Deposit::where('currency', $currency)
                      ->where('period', $period)
                      ->first();
});

Upvotes: 3

StealthTrails
StealthTrails

Reputation: 2415

I can not give you exact code but I can help you
Step 1
Detect when the user select options using jQuery or JavaScript
Step 2
then send an ajax request to controller like this

$.ajax({
            url: "/home",
            type: 'post or get',
            data: data to send to server,
            success: function(){
                console.log("success");
            },
        error: function(){
            $(".necessary-fields").show();

        }
        });

Step 3
Set up the route Route::post('home', 'MyController@getData')

Step 4
in your controller

class MyController extends Controller{
    public function getData(){
        //fetch data from db
        return data;
    }
}

Upvotes: 0

Related Questions