Vue.js如何实现仅点击提交按钮后才触发v-if/v-else切换区块显示

问题根因 #

你当前的v-if直接绑定了和输入框双向绑定的search变量，只要你在输入框输入字符，search的值就会实时变化，自然会直接触发v-if/v-else的切换，和你是否点击提交按钮没有关系。

方案1：当前页展示搜索结果（无需改路由） #

只需要新增一个专门控制搜索结果显隐的变量即可，修改如下：

1. 修改script逻辑

// 导入新增的watch
import { ref, watch } 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 showSearchResult = ref(false);

    const SearchMovies = () => {
      if (search.value.trim() !== "") {
        fetch(`API_HERE`)
        .then(response => response.json())
        .then(data => {
          console.log(data)
          movies.value = data.Search;
          // 请求成功后才展示搜索结果
          showSearchResult.value = true;
        })
      }
    }

    // 可选：监听搜索框清空时自动切回推荐区块
    watch(search, (newVal) => {
      if (newVal.trim() === '') {
        showSearchResult.value = false;
        movies.value = [];
      }
    })

    return {
      search,
      movies,
      SearchMovies,
      showSearchResult // 记得导出
    }
  }
}

2. 修改template判断条件

把原来的

<div class="movies-list" v-if="search !== ''" >

改成

<div class="movies-list" v-if="showSearchResult" >

方案2：搜索结果跳转独立页面（更适合复杂业务场景） #

这种方案可以实现搜索结果页独立分享、回退逻辑更清晰，实现也很简单：

1. 新增搜索结果页面

新建views/SearchResult.vue，代码如下：

<template>
  <div class="search-result">
    <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>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    const movies = ref([])

    const getMovieList = async () => {
      const keyword = route.query.q
      if (!keyword) return
      const res = await fetch(`API_HERE?keyword=${encodeURIComponent(keyword)}`)
      const data = await res.json()
      movies.value = data.Search
    }

    // 页面加载时请求数据
    onMounted(() => getMovieList())
    // 可选：监听搜索关键词变化时重新请求
    watch(() => route.query.q, () => getMovieList())

    return {
      movies
    }
  }
}
</script>

2. 配置路由

在路由配置文件中新增搜索结果页路由：

{
  path: '/search',
  name: 'SearchResult',
  component: () => import('../views/SearchResult.vue')
}

3. 修改首页代码

• 删掉template中的v-if/v-else判断，直接保留MovieSection和SecondMovieSection渲染即可，移除原来的movies-list区块
• 修改首页提交逻辑：

import { ref } from 'vue';
import { useRouter } from 'vue-router'
import MovieSection from '@/components/MovieSection.vue';
import SecondMovieSection from '@/components/SecondMovieSection.vue'

export default {
  components: {
    MovieSection,
    SecondMovieSection
  },
  setup () {
    const search = ref("");
    const router = useRouter()

    const SearchMovies = () => {
      if (search.value.trim() !== "") {
        // 直接跳转到搜索结果页，带搜索关键词参数
        router.push(`/search?q=${encodeURIComponent(search.value)}`)
      }
    }

    return {
      search,
      SearchMovies
    }
  }
}

内容的提问来源于stack exchange，提问作者Msingh17