时间戳

首页 > 解决方案 > Vue-autosuggest：如何在选择时获取 autosuggest 组件的原始上下文？

vue.js - Vue-autosuggest：如何在选择时获取 autosuggest 组件的原始上下文？

问题描述

我在我的应用程序的 for 循环中使用 vue-autosuggest 库。在 autosuggest selected 事件中，我试图确定选择应用于哪个自动建议（即，哪一行），以便我可以更新该行的其他信息。如何回到 for 循环中的原始元素？

例如：

<tr v-for="lineindex, line in buylist.lines">
    <td class="image-column">
        <img v-if="line.image_url != ''" :src="line.image_url" class="img-thumbnail" :alt="line.sku">
    </td>
    <td class="sku-column"><vue-autosuggest
            v-model="line.sku" :suggestions="suggestions" :input-props="{placeholder:'Enter a SKU...', class:'form-control line-id'}" 
            :get-suggestion-value="getSku"
            @input="onInputChange" @selected="onSelected" @click="clickHandler">  
            <template slot-scope="{suggestion}">
                <div class="d-flex justify-content-start align-items-center">
                    <div class="mr-4">
                        <img class="image" v-bind:src="suggestion.item.image_url">
                    </div>
                    <div class="flex-grow-1">
                        <span class="item-description">{{ suggestion.item.description }}</span><br>
                        <span class="item-sku">{{ suggestion.item.sku }}</span>
                    </div>
                    <div class="attribute-column">
                        <p class="attribute"><span class="attribute-value">{{ suggestion.item.category }}</span></p>
                        <p class="attribute"><span class="attribute-value">{{ suggestion.item.style }}</span></p>
                        <p class="attribute"></p>
                    </div>
                    <div class="attribute-column">
                        <p class="attribute"><span class="attribute-value">{{ suggestion.item.material }}</span></p>
                        <p class="attribute"><span class="attribute-value">{{ suggestion.item.grade }}</span></p>
                        <p class="attribute"><span class="attribute-value">{{ suggestion.item.size }}</span></p>
                    </div>
                </div>
            </template>
        </vue-autosuggest>
    </td>
</tr>

同时，我的建议对象是：

[
    {    
      'sku': 'Q6JAGA2OVB',
      'image_url': '03163637.jpg',
      'description': 'd1',
      'material': 'Silver',
      'style': 'd2',
      'size': '',
      'grade': 'AB',
      'category': 'd3',
    },
    {
      'sku': 'Q6JAHA2OVB',
      'image_url': '03133892.jpg',
      'description': 'd5',
      'material': 'Gold',
      'style': 'd6',
      'size': '',
      'grade': 'A',
      'category': 'd7',
    }
]

在 onSelected 方法中，我想使用来自所选建议的数据更新“line”对象上的其他属性（例如，图像 URL）。我需要访问对象“line”或“lineindex”的值，以便以某种方式更新buylist.lines 中的正确元素。我在想即使只是自动建议的原始输入元素也可以工作（我可以把 index 属性放在那里）。据我所知，onSelected 事件仅提供建议及其索引，但不提供组件实例或其上下文。

有任何想法吗？

标签： vue.js

解决方案

我解决了一个类似的任务。我不知道正确地解决了它，但我确实喜欢这个。我在数据对象中添加了一个道具，如下所示：

lastAutoSuggestFocused: null

并为自动建议元素创建了一个焦点方法：

doFocus(event){
    this.lastAutoSuggestFocused = event.target;
}

After it when an option are selecting I select lastAutoSuggestFocused:

onSelect(suggestion){
    const listId = this.lastAutoSuggestFocused.id;
    this.lastAutoSuggestFocused = null;
}

你能有另一个解决方案吗？

推荐阅读