Vue.js 过滤函数返回 [Object Promise]答案

【问题标题】：Vue.js filter function returns [Object Promise]Vue.js 过滤函数返回 [Object Promise]
【发布时间】：2021-08-16 02:49:20
【问题描述】：

我是 Vue 的新手，对于这个项目，我正在尝试使用过滤器功能来格式化我的时间值。当我在返回之前使用console.log(data) 时，它看起来像正确打印数据，但是当我返回时，它显示[Object Promise]。如何将 [Object Promise] 转换为实际时间数据？

JSFiddle 代码链接 = https://jsfiddle.net/ujjumaki/j0wf5ohg/11/

查看

<div v-for="(item,index) in fetchDetails" :key="item.id">
  <p>{{ item.time | formatData(item.time)}}</p>
</div>

过滤功能

filters: {
 async formatData (value) {
  const response = await axios.get(process.env.VUE_TABLE+'/'+value)
  const data = await response.data.time    
  console.log(data); /** prints out the value as CHRIS **/
  return data
 }
}

数据

data: {
    fetchDetails: [
      { time: "75", id: 1 },
      { time: "124", id: 2 },
      { time: "93", id: 3 },
    ]
  },

【问题讨论】：

async 函数总是返回到Promise。因此，获取实际值的唯一方法是在组件中创建一个状态变量，并将值注入其中打印数据的位置。
我不喜欢 Vue，但似乎有一些 pretty strong arguments 反对使用异步过滤器。

标签： vue.js async-await promise axios

【解决方案1】：

您正在返回 [object Promise]，因为您的过滤器正在使用异步，这意味着它总是会返回一个 Promise。解决这个问题的最简单方法是创建一个新的子组件来显示时间。在那个新组件中，你可以调用你的 Promise 来从mounted 上的服务器获取要显示的时间：

Updated JSFiddle

<div id="app">
  <div v-for="(item,index) in fetchDetails" :key="item.id" style="margin-bottom: 15px;">
    <p>{{ item.time}}</p>
    <time-component :time="item.time"></time-component>
  </div>
</div>

var Time = Vue.component('time-component', {
  template: '<div>{{formattedTime}}</div>',
  props: {
    time: {
        type: String,
      default: 0
    }
  },
  data() {
      return { formattedTime: 100 }
  },
  mounted: function() {
    // Make api call here to fetch time to display
    // update state with time returned from server and display that

     /* const response = axios.get(process.env.VUE_TABLE+'/'+value).then(() => {
       this.formattedTime = response.data.time;
     }) */
     
     // example
     this.formattedTime = Math.random()
  }
});

new Vue({
  el: "#app",
  data: {
    fetchDetails: [
      { time: "75", id: 1 },
      { time: "124", id: 2 },
      { time: "93", id: 3 },
    ]
  },
  components: {
    'time-component': Time
  }
})

【讨论】：

【解决方案2】：

您想要获取数据。不使用过滤器。

https://nuxtjs.org/docs/2.x/features/data-fetching/

【讨论】：

【解决方案3】：

您的过滤器函数返回一个Promise，所以这个错误是有道理的。无论如何，Vue 中的过滤器不应该是异步的。相反，您可以在加载项目后更新它们。像这样的：

// component script
methods: {
  setFormattedTime: async function (item) {
    // Your API call here
    item.time = timeFromResponse;
  }
},
mounted: function () {
  // Load items from API
  this.fetchDetails.forEach(this.setFormattedTime);
}

如果您没有从该组件中的 API 加载 fetchDetails，而是通过 prop 传递它们，只需更新 mounted 函数以为每个项目调用 this.setFormattedTime。

【讨论】：