javascript - 根据选择，我怎样才能移动到 vue js html 中的另一个页面？

Question

这是我的html代码(第一次尝试)

 <div class="col-md-4" >
    <div class="form-group label-floating">
    <label class="control-label">Select  No</label>
    <select class="form-control" v-model="or" required="">
    <option value="" selected disabled hidden>Choose Type here</option>
    <option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
    </select>
    </div>
    </div>

因此，根据下拉列表，如果我选择了一个特定的值，我需要移动到带有它的 docId 的记录详情页面。

当我尝试这段代码时，它不起作用。

我还尝试了以下代码(第二次尝试)

<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="" @change="orCost()">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>

我的vue js代码是

methods:{
 orCost: function(e) {
  var vm = this;
  data = {};
  data['or'] = this.or;
  $.ajax({
  url: '/recorddetails/'+this.or,
  data: data,
  type: "GET",
  dataType: 'json',
  success: function(e) {
  if (e.status)
  {

  }
  else {

  }
  }
  });
 return false;
 },
},

问题是我无法重定向到记录详情页面。请帮我重定向到记录详情页面。我能够在 orCost() 中获取 docId 值和所有值，但它们没有重定向。请帮我重定向

Answer 1

我猜你尝试的太复杂了。试试这个

我已经包括了一个表格也添加了一个名字作为没有。

<form method="post" action="/recorddetails/" name="myform"  class=" form-inline" >
 <div class="col-md-4" >
 <div class="form-group label-floating">
 <label class="control-label">Select Or No</label>
 <select class="form-control" name="no" v-model="or" required="" >
 <option value="" selected disabled hidden>Choose Type here</option>
 <option v-for="aon in data" v-bind:value="aon.docId" >{{aon.orno}}</option>
 </select>
 </div>
 </div>
 <button class="btn search-btn" type="submit"><i class="fa fa-search"></i></button>
 </form>