Блог

vue.js, как я могу скрыть свой раздел только после нажатия кнопки «Отправить». прямо сейчас раздел исчезает после того, как я нажму одну букву. Я хочу, чтобы V-if и V-else активировались только после того, как пользователь отправит свой запрос. или если перенаправление результатов на другую страницу было бы проще, я бы тоже хотел пойти по этому маршруту.

 <template>
  <div class="home">

   
        <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=1amp;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 !== ''" >
       <div class="container">
       <div class="row">
       <div class="col-3"   v-for="movie in movies" :key="movie.imdbID">
         <router-link :to="'/movie/' movie.imdbID" class="movie-link">
             <img class="movieImg" height="100%" :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>
</div>
     <div  class="container" v-else>
       <MovieSection />
       <SecondMovieSection />
     </div>


  </div>
  
</template>
import { ref } from 'vue';
import env from '@/env.js';
import MovieSection from '@/components/MovieSection.vue';
import SecondMovieSection from '@/components/SecondMovieSection.vue'

export default {
  components: {
    MovieSection,
    SecondMovieSection
  },
  setup () {
    const search = ref("");
    const movies = ref([]);

    const SearchMovies = () => {
      if (search.value !== "") {
        fetch(`API_HERE`)
        .then(response => response.json())
        .then(data => {
          console.log(data)
          movies.value = data.Search;
          
          
        })
      }
    }

    return {
      search,
      movies,
      SearchMovies
    }
  }

}

    
 

Ну, он закрывается, как только вы вводите один символ, потому что поиск — это модель-он обновляется при каждом нажатии клавиши, которое вы делаете при вводе, к которому он привязан. Вместо этого вы хотите скрыть форму в зависимости от того, есть ли у вас записи в массиве фильмов или нет, поэтому попробуйте перейти v-if="search !== ''" на v-if="!movies.length"