Как перехватить экспортируемое значение из vue-массива для вставки в js-код?

Question

[Матвей Уваров]

Подскажите пожалуйста как "вытащить" значение из массива vue и вставить в js-код, в нужное (отметил) место? В html всё получается, а вот в js выводит ошибку. Перерыл инет, но подобного не нашёл.

<template>
      <v-app>
    .
    .
    .
              <v-list>
                <v-list-tile
                  v-for="(item, index) in menuItems"
                  :key="index"
                  :href="'/'+item.locale"   <!-- тут экспортируемое значение item.locale нормально работает -->
                  @click="buttonClick"
                >
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile>
              </v-list>
    .
    .
    .
      </v-app>
    </template>

// импортируем библиотеку tiny-cookie
      import { getCookie, setCookie } from 'tiny-cookie'

      export default {
        data: () => ({
          dialog: false,
          drawer: null,
          menuItems: [
            { locale: 'ru', title: 'Русский' },
            { locale: 'en', title: 'English' },
            { locale: 'ko', title: '한국어' }
          ],
        }),
        methods:{
          buttonClick: function() {

            // пишем локаль в кукисы
            const flag = true
            setCookie('flag', flag)
            setCookie('language', item.locale ) // сюда нужно вставить, но item.locale выдает ошибку
          }
        },
        props: {
          source: String
        }
      }

Answer 1

[Андрей Седышев]

<v-list>
                <v-list-tile
                  v-for="(item, index) in menuItems"
                  :key="index"
                  :href="'/'+item.locale"   <!-- тут экспортируемое значение item.locale нормально работает -->
                  @click="buttonClick(index)"
                >
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile>
              </v-list>

buttonClick: function(index) {

            // пишем локаль в кукисы
            const flag = true
            setCookie('flag', flag)
            setCookie('language', this.menuItems[index].locale ) // сюда нужно вставить, но item.locale выдает ошибку
          }

Comments

[Матвей Уваров]

Спасибо Андрей, Ваше решение отлично работает.

[Александр Урих]

Эм.. А почему бы не передать в метод непосредственно item или сразу item.locale?

<v-list>
    <v-list-tile
      v-for="(item, index) in menuItems"
      :key="index"
      :href="'/'+item.locale"   <!-- тут экспортируемое значение item.locale нормально работает -->
      @click="buttonClick(item)"
    >
      <v-list-tile-title>{{ item.title }}</v-list-tile-title>
    </v-list-tile>
</v-list>

buttonClick: function(item) {
    // пишем локаль в кукисы
    const flag = true
    setCookie('flag', flag)
    setCookie('language', item.locale ) // сюда нужно вставить, но item.locale выдает ошибку
}

[Андрей Седышев]

Александр Урих, да, так будет правильнее

Answer 2

[Матвей Уваров]

Алексей, так вот же где - v-for="(item, index) in menuItems"... Работает в html-тегах,
а в script - нет.