如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？

Posted 2023-03-27

【中文标题】如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？

【英文标题】：How to select filters and use the selected value to search in vue application?

【发布时间】：2021-09-21 21:51:06

【问题描述】：

我有一个 Vue JS 应用程序，用户在其中选择或输入过滤器并根据这些过滤器搜索数据库。目前我有一个“to”和一个“from”部分，其中的值用于获取 url 以从 json-server 获取数据。一旦用户选择了“to”和/或“from”，他们可以点击一个按钮，应用过滤器并从 json-server 获取消息。

以下是相关代码：

    <template>
    <v-app>
     <v-autocomplete dense
          filled
          label="From: "
          v-model="selectedFrom"
          :items="msgFromID"
          item-text='MsgFrom'
          item-value='MsgFrom'>
    </v-autocomplete>
    <v-autocomplete dense
          filled
          label="To: "
          v-model="selectedTo"
          :items="msgToID"
          item-text='MsgTo'
          item-value='MsgTo'>
    </v-autocomplete>

    <v-btn @click="fetchData()">Apply Filters</v-btn>
   </v-app>
   </template>

   <script>
export default 
    name: 'Inbox',
    data() 
        return 
            msgFromID: [],
            msgToID: []
   
 ,  
 mounted() 
        fetch('SAMPLEURL/messages?MsgFrom=')
            .then(res => res.json())
            .then(data => this.msgFromID = data)
            .catch(err => console.log(err.message)),
            fetch('SAMPLEURL/messages?MsgTo=')
                .then(res => res.json())
                .then(data => this.msgToID = data)
                .catch(err => console.log(err.message)),
 ,
methods: 
        fetchData(selectedTo, selectedFrom) 
            fetch('SAMPLEURL/messages?MsgFrom=' + selectedFrom + '&MsgTo=' + selectedTo)
                .then(
                    function (response) 
                        if (response.status !== 200) 
                            console.log('Looks like there was a problem. Status Code: ' +
                                response.status);
                            return;
                        
       

每当我单击“应用过滤器”按钮时，选择的值都不会保存，我最终会在日志中看到这个 url：

    SAMPLEURL/messages?MsgFrom=undefined&MsgTo=undefined

如何使值不再显示为未定义，而是检索我可以在页面上显示的消息列表？另外，如果没有用户选择的值，是否可以完全忽略其中一个搜索条件（MsgFrom 或 MsgTo）？

【参考方案1】：

您的click-binding 不传递任何参数：

<v-btn @click="fetchData()">

但该方法需要它们：

export default 
  methods: 
    fetchData(selectedTo, selectedFrom) /*...*/
  

由于没有向该方法传递任何参数，selectedTo 和 selectedFrom 的值是 undefined，导致您观察到的错误。

解决方案

您可以更新绑定以传递所需的参数：

<v-btn @click="fetchData(selectedTo, selectedFrom)">

或者您可以更新方法以使用组件的数据道具：

export default 
  methods: 
    fetchData() 
      const  selectedTo, selectedFrom  = this
      fetch('SAMPLEURL/messages?MsgFrom=' + selectedFrom + '&MsgTo=' + selectedTo)
      //...