if in tag opening and closing - Vue

Question

if in tag opening and closing - Vue

Navigation

#1 by (0 votes)

0

Working with Vue I have encountered a problem.

I want to display a list of materials in a swiper dynamically.

My problem comes from not being able to do an if around the div that contains the swiper-slide class or its closure.

Currently my code is as follows:

    <div class="material-list swiper-container">
                <div class="swiper-wrapper">
                    <template v-for="(material, index) in materials">
                        <div class="swiper-slide">
                            <div class="material">
                                <p>{{material.title}}</p>
                                <p>{{material.year}}</p>
                                <p>{{material.category}}</p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

and I would like to get something like this:

    <div class="material-list swiper-container">
                <div class="swiper-wrapper">
                    <template v-for="(material, index) in materials">
                       {{ if index == 0 }}
                        <div class="swiper-slide">
                        {{/if}}
                            <div class="material">
                                <p>{{material.title}}</p>
                                <p>{{material.year}}</p>
                                <p>{{material.category}}</p>
                            </div>
                        {{ if index == 5 }}
                        </div>
                        {{/if}}
                    </template>
                </div>
            </div>

vue.js

asked by kopon 22.02.2018 в 13:06

source

1 answer

Configure display_errors in OFF Update a record "amount" JAVA

score 0 · Accepted Answer

It is not necessary to make opening and closing tags in vue, what you need to do is iterate over the div with class .material . Therefore you should do something like the following.

 <div class="material-list swiper-container">
   <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="material"
          v-for="(material, index) in materials"
          v-key="index">
          <p>{{material.title}}</p>
          <p>{{material.year}}</p>
          <p>{{material.category}}</p>
        </div>               
     </div>
   </div>
 </div>

This way you create all the materials inside your container .swiper-slide