vue.js 单击搜索按钮时显示和隐藏表单

xoshrz7s 于 2023-01-14 发布在 Vue.js

关注(0)|答案(2)|浏览(314)

这个想法是，当页面被加载时，页面只是通过按钮search查看搜索输入文本。当点击按钮search时，转到API函数并返回数据。如果数据存在，则显示form1，否则显示form2。
但我现在的问题是，我不知道如何隐藏这两种形式时，该网页是第一次加载。
第二个问题是，当我尝试搜索现有数据时，将看到正确的表单，即表单1，但当我尝试搜索不存在的数据（显示表单1）时，实际的表单（表单2）没有显示。
这是使用搜索按钮搜索文本输入的代码

<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>

这是form1的代码

<div v-if="selected">
                <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>

这是表单2的代码

<div v-else>                
                <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)" id="" 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>

这是从搜索按钮调用API的函数调用

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

        $.post(base_url + '/api/seminar/listing', {
            search: self.search, //self.search ( data yang nk disearch)                
            page: self.page,
        }, function(res){ //res adalah daripada API
            if (res.data && res.data.length > 0) {
                self.selected = res.data[0]; 
                // console.log(self.contents[0].di_nama); //nk debug saje papar di console (inspect)
                self.total_data = res.total_data; 
                self.total_page = res.total_page; 
            }                
        // console.log(res);//nk tgk apa yg server respond
        });  
        // self.showResults = true;          
    },

vue.js

来源：https://stackoverflow.com/questions/75065067/show-and-hide-form-when-clicked-search-button

2条答案

按热度按时间

gab6jxml1#

如果selected未定义/为false，则显示表单1，否则将显示表单2。只有这两个选项，将始终显示一个表单。您需要一个条件，使两个表单都不显示。一种方法是将新变量searched初始设置为false，只有在完成第一次搜索后才设置为true。在模板中使用该变量，以便在searched为false时隐藏两个表单

<div v-if="selected && searched">
...
</div>
<div v-else-if="searched">
...
</div>

data() {
  return {
    searched: false
  }
}

另一个问题是，在你成功搜索之后，selected就变成了真值，但是一旦你进行第二次搜索，selected仍然是真值，并且会一直是真值，除非你将它重置为初始的未定义值。

get_id() {
  this.selected = undefined
   ...
}

赞(0）回复(0）举报 2023-01-14

bnl4lu3b2#

根据我的理解，如果我们有来自API的数据，您希望显示form 1，否则我们必须在单击搜索按钮时显示form 2。如果是，您可以将falsy值分配给selected变量。

if (res.data && res.data.length > 0) {
  self.selected = true;
} else {
  self.selected = false;
}

***但我现在的问题是，我不知道如何在页面第一次加载时隐藏这两个表单。***-这个问题的答案是在if/else表单元素上添加一个带有if条件的 Package 器元素。

DOM结构应该是这样的**：**

<div v-if="isSearchButtonClicked">
    <div v-if="selected">
    </div>
    <div v-else>
    </div>
</div>

在脚本中**：**

data: {
   isSearchButtonClicked: false
}

get_id(page = 1) {
    this.isSearchButtonClicked = true;
}

赞(0）回复(0）举报 2023-01-14

我来回答

vue.js 单击搜索按钮时显示和隐藏表单

2条答案

相关问题

热门标签

最新问答