Как сделать временную переменную в шаблонах VueJs?

Question

Есть ли способ объявить временную переменную в шаблоне VueJS ?Моя проблема заключается в том, что в v-for я проверяю, существует ли фактическое значение в Array , и если нет, я печатаю другой текст, но для каждого элемента v-for он делает это дважды (сначала проверить, существует ли, а затем напечатать значение) где с переменной это можно сделать один раз.

Я использую VueJS2 без какого-либо препроцессора или шаблонизаторов.

Вот мой массив:

let formats = [
    {id: 1, label: "A3"},
    {id: 1, label: "A4"},
    {id: 1, label: "A5"},
    {id: 1, label: "A6"},
];

Вот мой шаблон:

<tr v-for="data in ajaxDatas">
    <td>
        <template
            v-if="formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            })"
        >
            {{ formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }).label }}
        </template>
        <template v-else>
            Other format
        </template>
    </td>
</tr>

Как видите, не очень оптимизирован... Я думал как сделать временную переменную для хранения возвращаемого результата, что-то вроде этого:

<tr v-for="data in ajaxDatas">
    <td>
        {{
            var f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            });
            f ? f.label : 'Other format'
        }}
    </td>
</tr>

ДЛЯ МОМЕНТА Я нашел способ, но он не работает должным образом, я могу сделать что-то вроде этого:

<tr v-for="data in ajaxDatas">
    <td>
        {{ f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }) }}
        {{ f ? f.label : 'Other format' }}
    </td>
</tr>

Но на самом деле это выводит меня результат f в HTML ... Так что я помещаю его в невысказанный HTML-тег, но это заставляет меня думать, что есть что-то лучшеделай здесь ...

Answer 1

Просто создайте метод и используйте его в своем шаблоне:

methods: {

  getFormat(width,height) {

    var f = this.formats.find( e => {

      return (e.shortEdge == height && e.longEdge == width) || (e.shortEdge == width && e.longEdge == height);

    });

    return f ? f.label : 'Other format'

  }

}

<tr v-for="data in ajaxDatas">
  <td>
      {{ getFormat(data.width,data.height) }}
  </td>
</tr>

Answer 2

Я нашел способ из ответа fabruex, но прямо в шаблоне ... Это не относится к VueJs, это создание самоисполняющейся анонимной функции ...

Проверьте это:

<tr v-for="data in ajaxDatas">
    <td>
        {{
            ((h, w) => {
                var f = formats.find(e => {
                    return (e.shortEdge == h && e.longEdge == w) || (e.shortEdge == w && e.longEdge == h);
                });
                return f ? f.label : 'Other format'
            })(data.height, data.width)
        }}
    </td>
</tr>

Answer 3

Не делайте этого в шаблоне, вы можете отфильтровать ваши данные в вычисляемом свойстве, а затем в v-для использования этого вычисляемого свойства. Как правило, всегда сохраняйте ваш шаблон как можно более простым, и вся сложная логика будетскрипт (методы, вычисленные реквизиты или хуки жизненного цикла).