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