Question

我已经成功地将响应数据放入下面的Vue块中的dateEvents返回中。我还为我使用的日历包成功渲染了events。我真正想做的是获取对事件对象的响应数据（我希望response.data name成为我的事件title和response.data available_at事件start）。

为了明确起见，我的响应数据如下：[name:"test one", available_at:"2019-09-25"][name:"test two", available_at:"2019-09-25"]，所以我想将要推送到response.data数组中的events并使用name title和available_at作为start。我肯定会得到数据并能够呈现dateEvents，但是我不确定如何将它们定向为这种格式的事件。

export default {
  data() {
    return {
      dateEvents: [],
      events: [
        {
          title: 'test',
          start: '2019-08-17',
        },
        {
          title: 'another test',
          start: '2019-08-20',
        },
      ],
      config: {
        defaultView: 'month',
        editable: true,
        eventRender: function(event, element) {
          console.log(event)
        },
      },
    }
  },
  created() {
    this.fetchTasks()
  },
  methods: {
    fetchTasks() {
      axios
        .get('/dashboard/tasks')
        .then(response => {
          // handle success
          console.log(response.data)
          this.dateEvents = response.data
          this.events = response.data
        })
        .catch(function(error) {
          // handle error
          console.log(error)
        })
        .finally(function() {})
    },
  },
}

Answer 1

您应该使用与方案匹配的对象创建一个新的数组。看下面的代码。我们正在响应中进行映射，并在每次迭代中创建一个新对象，其中包含title为item.name和start为item.item.available_at。

.then((response) => {
  // handle success
  console.log(response.data);
  const events = response.data.map(item => {
    return {
      title: item.name,
      start: item.available_at
    };
  });

  this.dateEvents = events;
  this.events = events;
})

Vue将响应数据重定向到Vue对象

1 个答案: