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

问题描述

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

相关代码如下：

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

每当我点击“APPLY FILTERS”按钮时，选择的值都不会被保存，我最终会在日志中看到这个网址：

    SAMPLEURL/messages?MsgFrom=undefined&MsgTo=undefined

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

解决方法

您的 click 绑定不传递参数：

<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)
      //...
    }
  }
}