Usage of getField() method in ResultItem

Overview

The ResultItem component included in the Vue SDK is the one that usually gets extended to match the layout of the result data. The data is retrieved using the getField() method and here are some insights on how to use it more efficiently.

Prerequisite

Standard usage

This the most basic usage of the getField() method. It can be used either in the <script type=”x-template”> or any of the components that extends the ResultItem. This will display the fetched data field for the result item and insert it into the markup (i.e. a title in a <h3>).

This invocation also handles languages, if available and configured for the instance. For instance, the field name in the response for the title with enabled Spanish language will be returned in the response as title_es or title_fr for French. Regardless of the language used, the getField() requires only the stem of the field name, so it will retrieve the correct data. In this scenario keep the structure the same as if there isn’t a suffix for the fields.

If the value is required to be used as an attribute value, rather than inline text, the Vue.js syntax applies.

Additional options

Multiple values

In most cases the retrieved data is a single value (title, url, etc.). In some scenarios the field has multiple values and the data must be parsed as an array to be displayed properly. This example will display the list of images from the thumbnails field.

Truncate long text

For fields that may contain unnecessary long text for this display, the getField() method can apply a truncate function.

The truncateTo option gets the maximum allowed limit. If it is exceeded, the value is truncated to that limit, breaking on a whole word and adding ellipses points at the end.