Vue表单显示隐藏问题求助：初始隐藏与搜索切换异常

针对你的两个问题，直接给出代码修改和逻辑调整：

1. 解决页面初始加载显示表单的问题 #

需要新增一个状态变量标记是否执行过搜索，同时调整表单的显示逻辑：

第一步：在Vue的data中添加状态 #

data() {
  return {
    search: '',
    selected: null, // 初始设为null，确保无数据时触发v-else
    hasSearched: false, // 标记是否执行过搜索，初始为false
    // 保留你原有的其他变量：kod_negara、error等
  }
}

第二步：调整表单的外层容器 #

把form1和form2包裹在一个受hasSearched控制的容器里，初始不显示：

<!-- 搜索区域（保持不变） -->
<div class="input-group mb-3" style="width: 500px;">
  <input v-model="search" type="text" id="id_search" class="form-control float-right" placeholder="IC/Passport Number/Student ID ">
  <div class="input-group-append">
    <button @click.prevent="get_id()" type="submit" class="btn btn-default">
      <i class="fas fa-search"></i>
    </button>
  </div>
</div>

<!-- 结果表单区域：只有执行过搜索才显示 -->
<div v-if="hasSearched">
  <!-- form1：有数据时显示 -->
  <div v-if="selected">
    <!-- 你的form1代码保持不变 -->
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-id-card-clip"></i></span>
      </div>
      <input name="nama" class="form-control" placeholder="Name" v-model="selected.di_nama">
    </div>
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-location-dot"></i></span>
      </div>
      <input name="address" class="form-control" placeholder="Address" v-model="selected.di_alamat1">
    </div>
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-location-dot"></i></span>
      </div>
      <select class="form-control" v-model="selected.di_kod_negara" :class="{'is-invalid': error.kod_negara}">
        <option value="">-Select Country-</option>
        <option :value="selected.di_kod_negara" selected>{{selected.negara}}</option>
        <option :value="r.kod" v-for="r in kod_negara">{{r.keterangan}}</option>
      </select>
    </div>
  </div>

  <!-- form2：无数据时显示 -->
  <div v-else>
    <!-- 你的form2代码保持不变 -->
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-id-card-clip"></i></span>
      </div>
      <input name="di_nama" class="form-control" placeholder="Name">
    </div>
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-location-dot"></i></span>
      </div>
      <input name="di_alamat1" class="form-control" placeholder="Address">
    </div>
    <div class="input-group mb-3" style="width: 500px;">                                    
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa-solid fa-location-dot"></i></span>
      </div>
      <select @change="get_country($event)" class="form-control" v-model="sel_kod_negara">
        <option value="">-Select Country-</option>
        <option :value="r.kod" v-for="r in kod_negara">{{r.keterangan}}</option>
      </select>
    </div>
  </div>
</div>

2. 解决搜索无数据时无法切换到form2的问题 #

修改get_id函数，在无数据时重置selected，并标记搜索已执行：

get_id(page = 1){
  var self = this;
  self.page = page;

  // 每次搜索先重置状态，避免旧数据干扰
  self.selected = null;
  self.hasSearched = true;

  $.post(base_url + '/api/seminar/listing', {
    search: self.search,
    page: self.page,
  }, function(res){
    if (res.data && res.data.length > 0) {
      self.selected = res.data[0]; 
      self.total_data = res.total_data; 
      self.total_page = res.total_page; 
    } else {
      // 明确设置selected为null，确保form2显示
      self.selected = null;
    }
  });  
}

修复说明 #

• hasSearched变量：控制结果区域的显示，初始为false，所以页面加载时只显示搜索框。
• 重置selected：每次搜索前清空旧数据，API返回无数据时强制设为null，确保v-else触发显示form2。
• 外层容器的v-if="hasSearched"：保证只有用户点击搜索后才显示表单区域。

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