Vue JS default/starting 搜索词列表中的一个值

Question

尝试使用 Vue 制作搜索插件，但我在向选项列表添加 starting/default 值时遇到问题。如果我注释掉涉及 start 道具的对或模板行，其余部分工作正常，但如果我将它们留在其中，则不会呈现任何内容。

组件代码：

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>

谁能告诉我我做错了什么？（除了 hacked together 模板之外，我希望这是一个与我所拥有的管道完全不同的问题）

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

Vue JS default/starting 搜索词列表中的一个值

VueJS default/starting a value ina list of searched terms

vue.js

vue-component

vuejs2