在Vue中从后端响应修改数据的正确方法？

问题描述

我已经在Angular中编程了一年，现在我正在Vue中开发我的第一个应用程序，而我很难适应文件的结构。

我正在调试从后端调用的嵌套对象数组，我需要修改并包含一些数据。

然后我通过v-for运行此数组以在模板中显示信息。我尝试做的第一件事就是在返回之前修改Vue脚本“计算”部分中的数据，但是对于加载时间问题，由于尝试制作地图时未提供信息而引发了错误。 / p>

然后我尝试将其包装在同一函数中的setTimeout中，但是我发现在该部分中不允许应用setTimeout，因此我删除了这个想法。

最后，我尝试在初次加载时使用的函数中访问数组，由于我一直遇到计时问题，因此将其包装在settimeout中。在这种情况下，它会起作用，但并非总是如此，如果组件之间存在导航有时也会失败。

我的问题是，在什么时候可以包括此修改，以使其不会返回错误，因为我还没有数据？

<script>
  export default {
    data() {
      return {
        step: 1,selectedItem: 1,selectedStore: null,allitems: null,imageSelected: false,serviceSelected: false,}
    },components: {

    },computed: {

      filteredEstimation() {
        return !this.$store.getters.estimations ? null : this.$store.getters.estimations.filter(item => item.id == this.selected)[0].offers
      },},methods: {

      navigatetoCreate() {
        this.$store.dispatch('setStep',this.step + 1)
        this.$router.push('/devis/create')
      },onChange(event) {
        let idTest = event.target.value;
        const items = this.selectedItems
      },beforeCreate() {
      console.log('beforeCreate')
      this.$store.dispatch('fetchItems')
      this.$store.dispatch('fetchStore')
      this.$store.dispatch('fetchEstimations')
    },created() {
      console.log('created')
      //this.selectedItems = !this.$store.getters.items ? null : this.$store.getters.items
      if (this.$store.getters.step === 0) {
        this.$store.dispatch('setStep',this.step)
      }
      setTimeout(() => {
        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";
            }
          });
        });
      },700);
    },}
</script>

这是我的html

<div class="list-items-services">
  <div class='column-service' v-for='estimation in filteredEstimation' v-bind:key="estimation.name">
    <div class="item-service-name">
      {{estimation.name}}
    </div>
    <div class="item-service-description">
      {{estimation.description}}
    </div>
    <div class="item-service-price">
      {{estimation.price}}
      <span class="price-currency">$</span>
    </div>
  </div>
</div>

我希望我已经正确地解释了自己，非常感谢您的时间和帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asynchronous logic settimeout vue.js