如何在vue js html的文本框中显示选定的计划值？

Question

My json data is as follows

{"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}]}

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.

Currently my html code is

   <div class="form-group">
        <label>Plan <small>(select your plan)</small></label>
     <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">
   <option v-for="post in plansb" v-bind:value="post.planId" v-if="plansb.indexOf(post) > 0">{{post.name}} (Rs.{{post.cost}})</option>
            </select>
            </div>
        <div class="form-group">
     <label>Plan Amount <small>(required)</small></label>
<input name="plan_amt" type="text" class="form-control" id="plan_amt" placeholder="Plan Amount" v-model="plan_amt" />
        </div>

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.

How can I able to get the result as such.

My vue js code is

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;
              },

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.

Answer 1

您需要添加列表的更改事件并获取 palns 的计划，并根据计划获取它的成本并将其分配给您要显示更改计划成本的成本（文本框）模型