如何在VUEJS脚本中应用settimeout？

问题描述

我正在vuejs中开发我的第一个应用程序，并且在脚本的初始数据上传中，我需要修改从数据库调用中收到的数据。 由于我已经修改了数据，因此它在页面的初始加载中返回了错误，几秒钟后它加载就没有问题。 我试图将此函数包装在settimeout中，但它在vuejs中返回错误。 如何应用此setTimeout？

这是我的脚本

<script>
  export default {
    data () {
      return {
        step: 1,selected: 1
      }
    },components: {

    },computed:{
      selectedBasket() {
        
        return !this.$store.getters.basket ? null : this.$store.getters.basket
      },items(){
        return !this.$store.getters.items ? null : this.$store.getters.items
      },setTimeout(() => {
       filteredEstimation(){
        this.$store.getters.estimations.map(function(estimation) {
          estimation.offers.map(function(offer) {
            offer.name = offer.name.split(" ").reverse().slice(1).reverse().join(" ");
            if (offer.name.includes("first")) {
              offer.description = "first option";
            }
            if (offer.name.includes("second")) {
              offer.description = "second option";
            }
            if (offer.name.includes("third")) {
              offer.description = "third option";
            }
          });
        });
        return !this.$store.getters.estimations ? null : this.$store.getters.estimations.filter( item => item.id == this.selected )[0].offers
      },700);
    },methods: {
      getItemsName(item) {

        if(item == 1){
          return 'bag'
        } else if(item == 2){
          return 'paper'
        } else {
          return 'pen'
        }
      }
    }
  }
</script>

解决方法

您要在计算选项中使用该函数，这是不允许的，您应该在挂接的钩子中定义它，如：

<script>
  export default {
    data () {
      return {
        step: 1,selected: 1
      }
    },components: {

    },computed:{
      selectedBasket() {
        
        return !this.$store.getters.basket ? null : this.$store.getters.basket
      },items(){
        return !this.$store.getters.items ? null : this.$store.getters.items
      },},methods: {
      getItemsName(item) {

        if(item == 1){
          return 'bag'
        } else if(item == 2){
          return 'paper'
        } else {
          return 'pen'
        }
      }
    },mounted(){

      setTimeout(() => {
       filteredEstimation(){
        this.$store.getters.estimations.map(function(estimation) {
          estimation.offers.map(function(offer) {
            offer.name = offer.name.split(" ").reverse().slice(1).reverse().join(" ");
            if (offer.name.includes("first")) {
              offer.description = "first option";
            }
            if (offer.name.includes("second")) {
              offer.description = "second option";
            }
            if (offer.name.includes("third")) {
              offer.description = "third option";
            }
          });
        });
        return !this.$store.getters.estimations ? null : this.$store.getters.estimations.filter( item => item.id == this.selected )[0].offers
      },700);

  }
  }
</script>