分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？解决方案，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？解决方案的问题如何解决？下面主要结合日常开发的经验，给出你关于如何选择过滤器并使用选定的值在 vue 应用程序中进行搜索？解决方案的解决方法建议，希望对你解决如何选择过滤器并使用选定的值在 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)
      //...
    }
  }
}