Можно ли получить доступ к значению переменной в v-for вне цикла v-for?

Итак, у меня есть страница Vue, где я перебираю несколько элементов и у меня есть следующий код:

<div v-if="behavior !== 'selected' && filterItems.length >= 5"></div>
<div v-for="(itemName, index) in filterItems" :key="index">[stuff]</div>

По сути, я перебираю некоторые элементы из API, но я также хочу условно показать элемент, если таких элементов 5 или более, в противном случае я хочу, чтобы он был скрыт. Этот элемент должен существовать вне цикла, но он должен проверить, сколько элементов в цикле.

Интересно, что приведенный выше код работает, но он также выдает консольные ошибки, предположительно потому, что я обращаюсь к "filterItems" вне самого цикла.

(вот консольная ошибка: [Vue warn]: Ошибка при рендеринге: "Ошибка типа: Не удается прочитать свойство 'длина' из неопределенного")

Любые идеи о том, как я могу избежать появления этих ошибок и выполнить то, что мне нужно, настолько, насколько это возможно?

Как и просили, вот код объявления filterItems, Это просто реквизит, объявленный как массив:

props: {
    filterItems: Array,
    behavior: String,
  },

Он передается из родительского компонента в виде массива.

ОБНОВЛЕНИЕ: ВОЗМОЖНОЕ РЕШЕНИЕ?

Поэтому я не знаю, является ли это лучшим способом сделать это или нет, но я смог получить желаемый результат, выполнив следующее. Я хотел бы услышать отзывы о том, если это удовлетворительное решение:

Я добавил значение данных:

data() {
    return {
      displaySearch: false,
    };
  },

Затем добавил:

updated() {
    if (this.behavior !== 'selected' && this.filterItems.length >= 5) {
      this.displaySearch = true;
    }
  },

Затем запустил проверку нового логического значения: v-if="displaySearch"

Я думаю, что проверка против displaySearch после рендеринга страницы, и это позволяет избежать ошибки TypeError. Я попытался установить это, изначально, и это немедленно сломалось.

Окончательное решение Смотрите ответ ниже от Стивена Томаса. Я остановился на этом, так как мне кажется, что это самый простой и элегантный ответ.

Источник

3 ответа

Решение

возможно потому, что я обращаюсь к "filterItems" вне самого цикла.

Нету. filterItems не определяется v-for петля. Он определен (или должен быть определен) в компоненте props объект. Таким образом, он полностью доступен в любом месте вашего шаблона.

Ошибка типа: не удается прочитать свойство 'длина' из неопределенного "

Это указывает на то, что filterItems не определено Родитель, который включает этот компонент, не предоставляет значение. Вы можете определить массив по умолчанию (пустой) для свойства:

props: {
    filterItems: {
        type: Array,
        default() {
            return [];
        }
    },
    behavior: String
}

или вы можете исправить родителя

Источник

Я думаю, что он запускает filterItems, так как пустой массив уже решает, например:

date () {
     return {
         filterItems: []
     }
}
Источник

Vue не разрешает доступ к объявленным свойствам за пределами v-for (чтобы избежать конфликтов между свойствами)

Вы можете объявить глобальную логическую переменную, чтобы показать или скрыть компонент? или добавить свойство в ваши объекты, чтобы скрыть или показать

Источник
Другие вопросы по тегам