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的recorddetails页面。

当我尝试使用此代码时，它无效。

我也尝试了以下代码（第二次尝试）

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

问题是我无法重定向到recorddetails页面。请帮我重定向到recorddetails页面。我能够在orCost（）中获取docId值，但它们不会重定向。请帮我改变方向

Answer 1

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

我已经添加了一个名称为no的表单。

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

根据选择如何在vue js html中移动到另一个页面？

1 个答案: