Vue, обратится к this из калбека data() return?

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2023

Как я могу обратится к функции из methods в секции data() return? Существуют ли подобные методы или хуки?

Пример:

    export default {
      data() {
        return {
           data: {
                tooltip: {
                 y: {
                  formatter: function (t) {
                    return getToUSD(t) + " USD"
                 }
              },
            },
          }
       },
       methods: {
        myFnc(usd) {
          return usd+ ' вызванная функция';
        },
      },
     computed: {
       getToUSD(usd) {
        return this.myFnc(usd)
    },    
   }

Раздел formatter - это часть библиотеки apexcharts, конкретно formatter отвечает за title при наведении мыши на график и является каллбеком, что не дает мне возможности положить в this.formatter какие либо данные через другие методы.

Метод без computed:

export default {
  data() {
    return {
       data: {
            y: {
              formatter: function (t) {
                return this.myFnc(t)
              }
            }
       }
   },
   methods: {
    myFnc(t) {
      return t + ' вызванная функция';
    },
  }    
}

Ответы

▲ 1Принят

Можно достать вот так, добавив ключ fnc, который ссылается как раз на нужную фукнцию fnc: this.myFnc,:

export default {
  data() {
    return {
       data: {
            fnc: this.myFnc, // Создаем ключ со ссылкой на фукнцию
            y: {
              formatter: function (t) {
                return this.fnc(t) // Вызываем
              }
            }
       }
   },
   methods: {
    myFnc(t) {
      return t + ' вызванная функция';
    },
  }    
}