如何 select 过滤并使用 selected 值在 vue 应用程序中进行搜索？

Question

我有一个 Vue JS 应用程序，用户可以在其中选择或输入过滤器并根据这些过滤器搜索数据库。目前我有一个“to”和“from”部分，其中的值用于提取 url 以从 json-server 获取数据。一旦用户选择了“收件人”and/or“发件人”，他们可以单击一个按钮，该按钮将应用过滤器并从 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;
                        }
       }

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

    SAMPLEURL/messages?MsgFrom=undefined&MsgTo=undefined

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

Answer 1

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

如何 select 过滤并使用 selected 值在 vue 应用程序中进行搜索？

How to select filters and use the selected value to search in vue application?

javascript

vue.js

vue-component

json-server

vuetify.js

解决方案