Есть ли способ показать div внутри div, который имеет ложное утверждение v-if - PullRequest
Новая
       17

Есть ли способ показать div внутри div, который имеет ложное утверждение v-if

0 голосов
/ 11 октября 2019

Я использую Laravel 6 и Vue.js 2.

Я использую цикл for, чтобы перебирать пользователей и отображать их информацию в div, как показано ниже.

У меня есть категорияимена хранятся в user.pivot.demo2. Пользователи распределены по категориям через lodash 

_.orderBy(this.category.users, ['pivot.demo2', 'pivot.demo3'])

Мне нужно, чтобы div с классом строки отображался только один раз для каждой категории. У меня установлено имя категории, которое отображается только в том случае, если имя категории является первым в списке или не совпадает с предыдущим именем. Это разделяет всех пользователей по категориям при отображении и помещает заголовок категории поверх их предполагаемых элементов div и работает просто отлично. Но мне нужно, чтобы внешний div с классом строки создавался только один раз для каждой категории, а затем заполнялся пользовательским div с классом col-lg-4.

В Blade Laravel я бы просто использовал что-то вроде 

@if(category != the-same-category)
<div class="row">
@endif
if (category == the-same-category)
<div class="col-lg-4">{{ User.name }} </div>
@endif

@if(category != the-same-category)
</div>
@endif

Это позволило бы div с классом строки показывать только один раз для каждой категории, но внутренние div с классом col-lg-4 повторять на каждом цикле. Это также закроет div в конце условия, и каждая категория будет иметь свои собственные div с пользователем внутри одного ряда div. Кажется, я не могу найти опцию Vue.js, которая позволила бы этот тип поведения. Кто-нибудь может предложить решение на JavaScript или Vue.js?

Пока у меня есть код ниже 

   <div class="outer-div text-center" v-for="(user, index) in the_category.users" :key="user.id">
  <div v-if="index === 0 || user.pivot.demo2 != the_category.users[index -1].pivot.demo2">
    <div class="text-center header-one">
      <h2>{{ user.pivot.demo2 }}</h2>
    </div>
    <hr />
    </div>

<div class="row d-flex justify-content-center"> // display once per category
  <div class="outer-profile-div col-md-4"> // display every loop
    <div class="user-name text-center">{{ user.name }}</div>
    <div class="user-title text-center">{{ user.title }}</div>     
  </div>
</div>

Моя общая цель - показать (.outer-profile-div)Следуйте друг за другом и оберните, как типичные div начальной загрузки, в .row, сохраняя при этом отзывчивый характер начальной загрузки. Я не против использования CSS, JavaScript, Vue.js или чего-либо еще, что даст желаемые результаты.

1 Ответ

0 голосов
/ 11 октября 2019

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

- Пример из vue-js docs - Попробуйте решить эту проблему и скажите, решит ли она это 

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>
...