Question

如果使用以下方法呈现列表，如果单击其中一个列表项，列表将消失。还添加了showdetal（）方法。

如何才能实现列表不会消失？

        data: function () {
            return {
                show: false,
                query: '',
                results: [],
                resultdetail: [].....
        methods: {
            autoComplete: function () {
                this.results = [];
                if (this.query.length > 1) {
                    axios.get('/getproductjson/' + this.query + '/0')
                        .then(function (response) {
                            this.results = response.data
                        }.bind(this))
                        .catch(function (error) {
                            console.log(error);
                        });.....

            showDetail: function (productId) {
                this.results = [];
                if (productId > 0) {
                    this.show = true;
                    this.resultdetail = [];
                    axios.get('/getproductjson/loremipsumdipsum/'+productId)
                        .then(function (response) {
                            this.resultdetail = response.data
                        }.bind(this.resultdetail))..


  <template id="autocomplete">
    <div>
        <div class="col">
            <section class="box clr1">
                <header>
                    <h1>Product zoeken</h1>
                </header>
                <div>
                    <div>
                        <input type="text" placeholder="Welk product zoekt U?" v-model="query" v-on:keyup="autoComplete"
                               class="form-control">
                        <div class="panel-footer" v-if="results.length">
                            <ul>
                                <li style="list-style-type: none;padding:10px 0;" class="list-group-item" v-for="result in results">
                                    <span style="text-decoration: underline;cursor:pointer" v-on:click="showDetail(result.id)">@{{ result.title }}</span>
                                </li>
                            </ul>....
    </div>
</template>

Answer 1

在showDetail（）中使用this.results = [];

清除结果

Vuejs 2持有数组

1 个答案: