VueJS默認/在搜索條目列表中啓動一個值

Question

試圖使用Vue製作搜索插件，並且我在向選項列表中添加開始/默認值時遇到問題。如果我註釋掉涉及啓動託其餘正常工作的對或模板線，但沒有渲染，如果我留在他們

組件代碼：

Vue.component('search', { 
props: { 
    type: String, 
    hidein: String, 
    start: { 
     type: Object, 
     default: null 
    } 
}, 
//props: ['type', 'hidein', 'start'], 

data: function() { 
    return { 
     search: "", 
     select: "", 
     results: [], 
    }; 
}, 

template: '<div @load="loaded"><input :id="hidein" type="text" v-model="search" @keyup="updateList">'+ 
'<input type="hidden" :name="hidein" v-model="select" class="form-control">'+ 
'<div v-if="start">Current: <span @click="select=start.id" :class="{\'label label-success\':(select==start.id)}>'+ 
'+ {{start.name}}</span></div>'+ 
'<div v-if="results.length">Do you mean:<ul>'+ 
'<li v-for="result in results" :key="result.id"><span @click="select=result.id" :class="{\'label label-success\':(select==result.id)}">'+ 
'+ {{result.name}}</span></li>'+ 
'</ul></div></div>', 

methods: { 
    updateList: function(e) { 
     var response = []; 
     console.log("search: "+this.search); 
     $.ajax({ 
      method: "GET", 
      url: "/api/search/"+this.type, 
      data: { key: this.search } 
     }).done(function(msg) { 
      this.results = msg; 
      console.log(this.results); 
     }.bind(this)); 
    }, 
    loaded: function() { 
     this.select=!!this.start ? this.start.id : null; 
    } 
}, 
}); 

組件調用：

<search type="ships" hidein="ship_id" ></search> 

誰能告訴我我做錯了什麼？ （除了砍死一起模板，這就是希望與管道我有一個完全獨立的問題）

Answer 1

存在丟失"這裏

:class="{\'label label-success\':(select==start.id)} 

而且，請使用文字模板，使您的生活更輕鬆。

`<div @load="loaded"><input :id="hidein" type="text" v-model="search" @keyup="updateList"> 
    <input type="hidden" :name="hidein" v-model="select" class="form-control"> 
    <div v-if="start"> 
     Current: 
     <span @click="select=start.id" :class="{'label label-success':(select==start.id)}"> 
     {{start.name}} 
     </span> 
    </div> 
    <div v-if="results.length"> 
     Do you mean: 
     <ul> 
     <li v-for="result in results" :key="result.id"> 
      <span @click="select=result.id" :class="{'label label-success':(select==result.id)}"> 
      {{result.name}} 
      </span> 
     </li> 
     </ul> 
    </div> 
    </div>`