Help Getting snippet to display

I’m having issues getting my snippets to display with the vue-instantsearch. The error I get in the console is attribute is currently not configured to be snippeted in Algolia. Maybe I don’t know how to reference snippets from my data correctly?

I’ve tried both adding the names of the snippets to my attributesToSnippet and using ‘*’ to get them all, both give me the errors. Here is an example of my indexsettings:

index-name="image_manager"
:query-parameters="{
  hitsPerPage: 3,
  attributesToSnippet: [
  'custom_fields.house',
  'custom_fields.name',
  'origin_path'],
  snippetEllipsisText: ' [...]'

In my Hit.vue component, here is where I list my snippets:

<div class="ais-hits--item">
  <article>
    <div class="post-img">
      <a> <img :src="host + result.origin_path + sizing" /> </a>
    </div>
    <div class="post-content">
      <h2 class="entry-title">
        <a>
          <ais-highlight
            :result="result"
            attribute-name="custom_fields.name"
          />
        </a>
      </h2>
      <div class="post-excerpt">
        <ais-snippet
          :result="result"
          attribute-name="custom_fields.house"
        />
      </div>
    </div>
  </article>
</div>

Finally, here is an example of a json record:

{
  "data": {
"attributes": {
  "categories": [
    "Game of Thrones"
  ],
  "color_profile_name": null,
  "colors": {
    "dominant_colors": {
      "#191928": 0.02911140583455563,
      "#1b1a20": 0.0862732082605362,
      "#2f343a": 0.2472148537635803,
      "#445d3c": 0.05152519792318344,
      "#4c5152": 0.06624668091535568,
      "#637956": 0.03441644459962845,
      "#757773": 0.03103448264300823,
      "#9da099": 0.05152519792318344,
      "#bfc8c4": 0.1391246616840362,
      "#d5e4e4": 0.1236737370491028
    }
  },
  "content_type": "image/jpeg",
  "custom_fields": {
    "House": "Stark",
    "Name": "Arya Stark"
  },
  "date_created": 1564094212,
  "date_modified": 1586235377,
  "description": null,
  "dpi_height": 96,
  "dpi_width": 96,
  "face_count": 1,
  "file_size": 79737,
  "has_faces": true,
  "has_frames": false,
  "has_labels": true,
  "has_user_defined": true,
  "has_warnings": true,
  "image_mode": "RGB",
  "media_height": 864,
  "media_kind": "IMAGE",
  "media_width": 620,
  "name": null,
  "origin_path": "/aryastark.jpg",
  "source_id": "55e4d9390d42e03905934ad4",
  "tags": {
    "Beauty": 0.8927432894706726,
    "Cool": 0.7880233526229858,
    "Fashion": 0.8184601068496704,
    "Grass": 0.7987149953842163,
    "Hair": 0.9675281047821045,
    "Hairstyle": 0.8363670110702515,
    "Lady": 0.8778034448623657,
    "Lip": 0.7990800142288208,
    "Long hair": 0.7738339304924011,
    "Photo shoot": 0.7680839896202087
  },
  "uploaded_by": null,
  "warning_adult": 1,
  "warning_medical": 1,
  "warning_racy": 1,
  "warning_spoof": 1,
  "warning_violence": 1
},
"id": "55e4d9390d42e03905934ad4/aryastark.jpg",
"type": "assets"
  },
  "included": [],
  "jsonapi": {
"version": "1.0"
  },
  "meta": {
"authentication": {
  "authorized": true,
  "clientId": null,
  "mode": "PUBLIC_APIKEY",
  "modeTitle": "Public API Key",
  "tag": "tom@imgix.com",
  "user": null
},
"server": {
  "commit": "d30e3eb5",
  "status": {
    "healthy": true,
    "read_only": false,
    "tombstone": false
  },
  "version": "3.97.1"
}
  },
  "objectID": "58716990"
}

The expected result is that I would pull in the origin_path to get the image url and I would display the custom_fields.name to get Arya Stark and the custom_fields.house to get Stark. But none of them are displaying, saying they are not correctly configured to be snippeted in Algolia. Thanks for any help!

Hi Thomas!

I can see in your example that your attribute ‘House’ in written with a capital H. Would you mind trying to use the same case when you try to retrieve your attributes and tell us if the problem still persist?

Thanks,

Hi Chloe,

Unfortunately it is still showing the same error. Here is a screenshot.

Could you double check you changed the case in your index.setSettings and also in your ais-snippet tag please? Thanks a lot!

Hi Chloe, I believe I did change it correctly and it still isn’t working. Just in case, here it is in my App.vue. I have it in my based on the template I used with vue-instantsearch.

    <template>
  <ais-index
    app-id="abcdefgh"
    api-key="1234567689"
    index-name="image_manager"
    :query-parameters="{
      hitsPerPage: 3,
      attributesToSnippet: [
      'custom_fields.Name',
      'custom_fields.House',
      'origin_path'],
      snippetEllipsisText: ' [...]'
    }"
  >

@chloe.liban Is there anything else I could help provide for this? I could invite you to a private gh repo if that would help. Thanks!