Как избежать Vue. js v-для дублирования bootstrap строки - PullRequest
Новая
       36

Как избежать Vue. js v-для дублирования bootstrap строки

1 голос
/ 04 апреля 2020

У меня есть этот код для пользовательской темы WordPress. Я получаю данные, используя REST API и Vue. js, чтобы динамически изменять DOM при событии щелчка. У меня небольшая проблема, я не могу отобразить данные с нужным мне макетом, потому что когда я использую v-if в главном ряду, где я хочу запустить свое приложение vue, это будет дублировать строка, но я хочу только иметь необходимые столбцы для макета. Я использую bootstrap 4, и столбцы col-*-3, поэтому внутри строки предполагается, что есть четыре столбца. Как я могу это исправить? 

  <div class="row bg-light p-5 mt-3" v-for="cat in catList" >

    <div class="col-sm-12 col-md-12 col-lg-12 p-0">
      <div class="dropdown">
        <a class="text-uppercase dropdown-toggle dropdown-toggle-split" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php _e('Collezioni'); ?>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a  v-on:click="displayCategory(cat.id)" class="dropdown-item" href="#">{{ cat.name }}</a>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-3 col-lg-3 col-background shadow-lg mt-5 mb-5 p-0" data-bg-url="" style="height:50vh;"></div>
    <div class="col-sm-12 col-md-3 col-lg-3 col-offset-top shadow-lg darkblue position-relative mt-5 mb-5 p-5">
      <small class="text-white m-0"></small>
      <h4 class="font-weight-bold text-white mt-2 mb-0" v-if="cat.name">{{ cat.name }}</h4>
      <h4 class="font-weight-bold text-white mt-2 mb-0" v-else>{{ cat.title }}</h4>
      <p v-if="cat.description">{{ cat.description }}</p>
      <p v-else>{{ cat.content }}</p>
    </div>

  </div>

ОБНОВЛЕНИЕ

Если я использую div <div v-for="cat in catList">, чтобы обернуть содержимое, макет будет нарушен. Смотрите на экран

enter image description here

1 Ответ

1 голос
/ 08 апреля 2020

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

Есть пара вещей, которые вы можете сделать здесь, создать еще один компонент для нижних элементов (те, которые имеют тень от фона) или создать два отдельных цикла, перемещая v-for="cat in catList", что потребует этих трех изменений 

<!--remove the v-for="cat in catList" because this breaks everything-->
<div class="row bg-light p-5 mt-3">

<!--add one loop here for the dropdown elements-->
<a v-for="cat in catList" v-on:click="displayCategory(cat.id)" class="dropdown-item" href="#">{{ cat.name }}</a> 

<!--add the second loop here-->
<div v-for="cat in catList" class="col-sm-12 col-md-3 col-lg-3 col-offset-top shadow-lg darkblue position-relative mt-5 mb-5 p-5">

Я обновил скрипку с изменениями здесь https://jsfiddle.net/zgranda/y9d5fk67/2/

При этом элементы не должны дублироваться, но все еще нужны некоторые CSS исправления для тени

РЕДАКТИРОВАТЬ : увидел ваш комментарий и отредактировал скрипку, теперь он должен l oop оба деления, так как я не знаю, как это должно выглядеть, поэтому вам нужно настроить CSS немного https://jsfiddle.net/zgranda/2w39pdac/3/

...