How to get views field raw value and entity Translation's title in Twig (Drupal)

I had a task to display multiple fields from a specific content type in a single view. Specifically, it was a page where office contacts were displayed in tabs: city, address, phone number, map, etc.

I had to create my own Twig template to fit the design requirements. Moreover, the task required the use of Tailwind CSS. I created a template file views-view-list--MYVIEWNAME.html.twig inside the templates/views/ directory.

However, I encountered a problem described here: Drupal.org Forum

When trying to output a field value in the Twig template using {{ view.field.field_name.original_value }}, I ended up with repeated city names instead of different office locations. Instead of "London, New York, Amsterdam," I was getting "London, London, London" multiple times.

A Google search didn't provide much help, but I found an alternative way to access the field:

row.content['#row']._entity.fields.field.field_name.value

Additionally, I had to debug using {{ dump(various-options) }}. And finally, it worked!

For example, the title field can be accessed like this:

row.content['#row']._entity.fields.field.title.value

Here’s how you can display fields as a list:

<ul id="contacts-tabs-list" class="">
  {% for row in rows %}
    {% set field = row.content['#row']._entity.fields %}
    <li{{ row.attributes.addClass('') }}>
      <button x-on:click="openTab = {{- field.nid.value -}}" :class="{ 'bg-lawsblue text-white': openTab === {{- field.nid.value -}}, 'bg-lawsgrey': openTab !== {{- field.nid.value -}} }" class="py-4 px-12 bg-lawsgrey hover:bg-lawsblue hover:text-white rounded">
        {{- field.title.value -}}
      </button>
    </li>
  {% endfor %}
</ul>

However, this approach causes another issue—entity translations do not work if you have a multilingual site. This is explained in detail here: Drupal StackExchange

To fix this, implement the following:

/**
 * Implements hook_preprocess_HOOK() for views_view_unformatted template.
 */
function MYTHEMENAME_preprocess_views_view_list__MYVIEWNAME(&$variables)
{
    $variables['lang'] = \Drupal::languageManager()->getCurrentLanguage()->getId();
}

Then, update your Twig template as follows:

<ul id="contacts-tabs-list" class="">
  {% for row in rows %}
    {% set field = row.content['#row']._entity.translation(lang).fields %}
    <li{{ row.attributes.addClass('') }}>
      <button x-on:click="openTab = {{- field.nid.value -}}" :class="{ 'bg-lawsblue text-white': openTab === {{- field.nid.value -}}, 'bg-lawsgrey': openTab !== {{- field.nid.value -}} }" class="py-4 px-12 bg-lawsgrey hover:bg-lawsblue hover:text-white rounded">
        {{- field.title.value -}}
      </button>
    </li>
  {% endfor %}
</ul>

Now, translations work correctly!