I want to hide one section when the other section is true, but I'm not sure if I'm using v-if and v-else in the right way. I tried rearranging the divs with the v-if but no combination I tried works for hiding the div in the way I want.

<template>

    <section id="whiteClawVideo" class="videoWrapper d-block w-100">
       <div class="video-container fluid">
        <iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       </div>
      </section>


 
 <form @submit.prevent="SearchMovies()" class="search-box">
   <input type="text" placeholder="What are you looking for? " v-model="search" />
   <input type="submit" value="Search">
 </form>
 
 

 <div class="movies-list"  v-if="search.value !=''" >
   <div class="movie" v-for="movie in movies" :key="movie.imdbID">
     <router-link :to="'/movie/' movie.imdbID" class="movie-link">
         <img :src="movie.Poster" alt="Movie Poster" />
           <div class="type">{{ movie.Type }}</div>
            <div class="detail">
              <p class="year">{{movie.Year}}</p>
              <h3>{{ movie.Title }}</h3>
              <p>{{movie.imdbID}}</p>
            </div>
     </router-link>
   </div>
 </div>

 <div  class="container" v-else>
   <MovieSection />
   <SecondMovieSection />
 </div>

CodePudding user response：

Change your v-if to just search !== '' since that's your model