Vue.js过滤函数returns[对象承诺]

Question

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

JSFiddle 代码Link = 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 },
    ]
  },

Answer 1

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

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

Answer 2

你的过滤函数returns一个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，而是通过道具传递它们，只需将 mounted 函数更新为为每个项目调用 this.setFormattedTime。

Answer 3

您正在取回 [object Promise]，因为您的过滤器正在使用异步，这意味着它总是会 return 一个 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
  }
})

Vue.js过滤函数returns[对象承诺]

Vue.js filter function returns [Object Promise]

promise

async-await

vue.js

axios