使用 Vue 和 Laravel 存储 AJAX 搜索结果答案

【问题标题】：Store AJAX Search results with Vue and Laravel使用 Vue 和 Laravel 存储 AJAX 搜索结果
【发布时间】：2021-09-26 07:14:51
【问题描述】：

我的目标是有两个输入字段，我可以在其中输入机场的三字母代码，AJAX 将运行查询以检查数据库中是否存在该机场。如果是，它将在输入字段下返回此机场的名称。

我设法使第一个输入起作用，但是，我有第二个输入，我想在其中搜索第二个机场，但是每当我在第二个字段中编写机场代码时，第一个搜索的结果就会被覆盖。

下面是包含两个输入字段的 Vue 组件。您知道使用相同的airportSearch() 方法获得两个结果的正确方法是什么吗？

<template>
    <div class="pairing-search">
        <div class="airport-input">
            <input type="text" v-model="From" @keyup="airportSearch">
            <ul v-if="Airports.length > 0">
                <li v-for="airport in Airports" :key="airport.id">{{ airport.name }}&nbsp;({{ airport.gps_code }})</li>
            </ul>
        </div>
        <div class="airport-input">
            <input type="text" v-model="To" @keyup="airportSearch">
        </div>
    </div>
</template>

<script>
    export default {
        name: "PairingSearch",
        data() {
            return {
                From: null,
                To: null,
                Airports: []
            };
        },
        methods: {
            airportSearch() {
                axios.get('/searchairport', {
                    params: { keyword: this.From }
                })
                .then(res => this.Airports = res.data)
                .catch(error => {});
            },
        }
    }
</script>

【问题讨论】：

标签： ajax laravel vue.js

【解决方案1】：

更新答案

<template>
  <div class="pairing-search">
    <div class="airport-input">
      <input type="text" v-model="From" @keyup="airportSearch(true)" />
      <ul v-if="sourceAirports.length">
        <li v-for="airport in sourceAirports" :key="airport.id">
          {{ airport | formatName }}
        </li>
      </ul>
    </div>

    <div class="airport-input">
      <input type="text" v-model="To" @keyup="airportSearch()" />
      <ul v-if="destAirports.length">
        <li v-for="airport in destAirports" :key="airport.id">
          {{ airport | formatName }})
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "PairingSearch",
  data() {
    return {
      From: null,
      To: null,
      sourceAirports: [],
      destAirports: []
    };
  },
  methods: {
    airportSearch(isSource = false) {
      axios
        .get("/searchairport", {
          params: {
            keyword: isSource ? this.From : this.To
          }
        })
        .then(res => {
          if (isSource) this.sourceAirports = res.data;
          else this.destAirports = res.data;
        });
    }
  },
  filters: {
    formatName: function(airport) {
      return `${airport.name} (${airport.gpsCode})`;
    }
  }
};
</script>

【讨论】：

嗨 Salvino，您使用的代码对我来说很有意义。但是它不返回任何结果，因此 sourceAirports 和 destAirports 不会填充结果。
嗨@AlexandruAna 非常抱歉！我已经重构 + 测试了我的代码并更新了我的答案。
PS：所有变量名请使用驼峰式大小写@AlexandruAna。

【解决方案2】：

对不起，我不熟悉vue，但是在我阅读文档后，您可以这样做。使用参数来拆分哪个输入触发事件。然后设置不同的元素值。

<template>
    <div class="pairing-search">

        <div class="airport-input">
            <input type="text" v-model="From" @keyup="airportSearch('first')">
            <ul v-if="Airports.length > 0">
                <li v-for="airport in Airports" :key="airport.id">{{ airport.name }}&nbsp;({{ airport.gps_code }})</li>
            </ul>
        </div>

        <div class="airport-input">
            <input type="text" v-model="To" @keyup="airportSearch('second')">
        </div>

    </div>
</template>

<script>
export default {
    name: "PairingSearch",
    data() {
        return {
            From: null,
            To: null,
            Airports: []
        };
    },
    methods: {
        airportSearch(which) {
            axios.get('/searchairport', {
                    params: { keyword: this.From }
                })
                .then(function(res){
                    if(which=='first'){
                        this.Airports = res.data
                    }else if (which=='second'){
                        this.Airports2 = res.data
                    }
                })
                .catch(error => {});
        },
    }
}
</script>

【讨论】：