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

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

0 голосов
/ 08 июня 2018

Итак, у меня есть страница 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]: Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство 'length' с неопределенным значением»)

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

В соответствии с просьбой, вот код, объявляющий 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 ]

0 голосов
/ 08 июня 2018

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

date () {
     return {
         filterItems: []
     }
}
0 голосов
/ 09 июня 2018

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

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

TypeError: Невозможно прочитать свойство 'length' undefined "

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

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

, или вы можете исправить родительский элемент

0 голосов
/ 08 июня 2018

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

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

...