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

Question

我的json数据如下

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

我需要从上面的列表中选择一个特定的类别，并在文本框中显示该类别的相应成本，我需要能够编辑该值。我怎样才能获得相同的东西。

目前我的html代码是

   <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>

在计划金额文本框中，我需要显示从上述选择中选择的类别的成本。现在我需要输入金额。如果选择 planId = 1，我需要在文本框中显示 500。我还需要编辑这些值并作为 ajax 请求发送。

我怎样才能得到这样的结果。

我的vue js代码是

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

谁能帮我得到结果。根据选择中的计划选择，我需要更新文本框中的值。请帮助我得出结果。

Answer 1

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