title: How to show the selected plan value in a text box in vue js html?
body: <p>My json data is as follows</p>
  
  <pre><code>{"status": true, "plans": [{"planId": 1, "name": "Baic", "cost": 500.0, "validity": 365}, {"planId": 3, "name": "free", "cost": 0.0, "validity": 999}, {"planId": 4, "name": "Premium", "cost": 500.0, "validity": 500}, {"planId": 5, "name": "Super Premium", "cost": 750.0, "validity": 600}, {"planId": 6, "name": "New", "cost": 600.0, "validity": 180}]}
  </code></pre>
  
  <p>I need to select a particular category from the above list and display the corresponding cost of the category in a text box and i need to able to edit the value. How acan I able to obtain the same.</p>
  
  <p>Currently my html code is</p>
  
  <pre><code>   &lt;div class="form-group"&gt;
          &lt;label&gt;Plan &lt;small&gt;(select your plan)&lt;/small&gt;&lt;/label&gt;
       &lt;select id="bas" class="selectpicker"  data-live-search="true" data-live-search-style="begins" title="Select Plan" v-model="plan" name="plan" ref="plan" required="required"&gt;
     &lt;option v-for="post in plansb" v-bind:value="post.planId" v-if="plansb.indexOf(post) &gt; 0"&gt;{{post.name}} (Rs.{{post.cost}})&lt;/option&gt;
              &lt;/select&gt;
              &lt;/div&gt;
          &lt;div class="form-group"&gt;
       &lt;label&gt;Plan Amount &lt;small&gt;(required)&lt;/small&gt;&lt;/label&gt;
  &lt;input name="plan_amt" type="text" class="form-control" id="plan_amt" placeholder="Plan Amount" v-model="plan_amt" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>In the Plan Amount text-box I need to display the cost of which category is selected from the above selection. Now I need to enter the amount. IF is selected planId = 1, I need to display 500 in the text-box. Also i need to edit those value and send as as ajax request.</p>
  
  <p>How can I able to get the result as such.</p>
  
  <p>My vue js code is</p>
  
  <pre><code>vBox = new Vue({
  el: "#vBox",
    data: {
          plansb: [],
          plan: '',
          plan_amt: '',
      },
       mounted: function() {
         var vm = this;
              $.ajax({
              url: "http://127.0.0.1:8000/alpha/get/plan/",
              method: "GET",
              dataType: "JSON",
              success: function(e) {
                 if (e.status == 1) { 
               vm.plansb = e.plans;
              }
              },
          });
         },
        methods: {
           handelSubmit: function(e) {
                 var vm = this;
                 data = {};
                 data['plan'] = this.plan;
                 data['plan_amt'] = this.plan_amt;
  
                  $.ajax({
                    url: 'http://127.0.0.1:8000/alpha/add/post/',
                    data: data,
                    type: "POST",
                    dataType: 'json',
                    success: function(e) {
                    if (e.status)
                    {
  
                      $("#alertModal").modal('show');
                    $(".alert").removeClass("hidden").html("Your data has been successfully recorded");
  
                      vm.pid=e.pid;
                      console.log(vm.pid);
  
                  }
                    else {
                      vm.response = e;
  
                     alert("Registration Failed") 
                    }
                }
                  });
                  return false;
                },
  </code></pre>
  
  <p>Can anybody please help me to obtain the result. Based on the selection of plans from the select, I need to update the values in the text box. Please help me to have a result.</p>