代码之家 › 专栏 › 技术社区 › Learner

如何在vue中中止方法

vuejs2 vue.js javascript

Learner · 技术社区 · 6 年前

我正在使用vue @keyup axios 电话:

<template>
    <div>
        <input type="text" placeholder="Where are you from?" v-model="from" @keyup="getPlace">
        <ul>
            <li v-for="place in places">{{ place.name }}<li>
        </ul>
    </div> 
</template>

<script>
export default {
    data() {
        return {
            places: [],
            from: ''
        }
    },
    methods() {
        if(this.from.length <= 3) { this.places = []; return; }
        getPlace() {
            axios.get('/places?name='+this.from).then((res)=>{
                this.places = [];
                for(var i = 0; i<res.data.length; i++) {
                    this.places.push(res.data[i]);                  
                }
            }).catch((err)=>{console.log(err)});
        }
    }
};
</script>

现在可以了,但是有一个很大的问题,每次调用它都会更新一个位置数组,但是时间很晚,所以方法被调用,数组被返回到[],但是在响应返回之后,它会为每个keyup填充数组(如果您键入的速度很快的话)。。。我正在从jquery前端切换到这个,我从来没有遇到过这样的问题:O

1 回复 | 直到 6 年前

Bennett Dams 6 年前

这并没有回答“如何中止方法”,但是您可以为您的示例使用不同的方法:在开始时获取所有位置( mounted()

var app = new Vue({
  el: '#app',
  data() {
    return {
      places: [],
      from: ''
    }
  },
  mounted() {
    this.getPlaces();
  },
  computed: {
    placesList() {
      let result = []
      let places = this.places
      let from = this.from

      if (from !== '') {
        result = this.places.filter(element => {
          return element.name.toLowerCase().includes(from.toLowerCase())
        })
      } else {
        result = places
      }

      return result
    }
  },
  methods: {
    getPlaces() {
      // axios call..
      this.places = [{
        id: 1,
        name: "Germany"
      }, {
        id: 2,
        name: "USA"
      }, {
        id: 3,
        name: "Spain"
      }]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type="text" placeholder="Where are you from?" v-model="from">
  <br /> input text: {{ from }}
  <hr>
  <ul>
    <li v-for="place in placesList" :key="place.id">
      {{ place.name }}
    </li>
  </ul>
</div>