current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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.

share|improve this question
    
you have to send the ajax request to get the data since it will change dynamically based on the user selected values. – Adam nick Dec 20 '15 at 18:50
up vote 2 down vote accepted

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();
});
share|improve this answer
    
I did everything as you described and it works. The only 1 problem I have is - the "percentages" is not appears in the percentage input field, when I use return response.percents. PHP returs the correct value, but console lo shows undefined. – Mistiqe Dec 20 '15 at 21:53
    
Ok. It was some mistakes from my side now it works fine. Big Thank you! – Mistiqe Dec 20 '15 at 22:14
up vote 0 down vote

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;
    }
}
share|improve this answer
    
I'll try this variant. – Mistiqe Dec 20 '15 at 19:23
    
@Mistique this component is very helpfull: github.com/vuejs/vue-resource – Lucas Dec 20 '15 at 19:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.