无法从选择元素vue.js获取数据

Question

我尝试了不同的方法来使从select项目中选择数据有效，但是仍然存在问题，也就是说，我无法将其绑定到模型。我之前使之起作用的唯一方法是使用v-if，但是select元素丢失了其css styling。 select元素是动态填充的，我尝试了不同的方法，此刻我对此感到困惑。

new Vue({
    el: '#app',
    data: {
      title: "",
      examType: "",
      classes: "",
      subjects: "",
      subjs:[],
      ndata:"",
      typeOptions: [
                @foreach($types as $t) 
                    { text: '{{@$t->title}}', value: '{{@$t->id}}' },
                @endforeach
            ]
    }
  });

选择元素

<div class="row">
  <div class="col-md-6 col-md-offset-3">
   <div class="form-group">
    <label>Exam Type: <span class="text-danger">*</span></label>
    <select name="examType" data-placeholder="Exam Type" class="select required" v-model="examType" >
      <option></option>
      <option v-for="p in typeOptions" v-bind:value="p.value">@{{ p.text }}</option>
     </select>
    </div>
   </div>
  </div>

目前，没有错误报告给控制台。如何从选择元素中获取选择的数据？