Question

我正在使用vuejs构建一个小应用程序，我正在调用一个url来获取一些数据。我需要在显示之前操纵数据。在响应中，我收到了一个包含字段

的元素数组

client_name: "ABCD Company"
event_type: 3
type: "meeting"
venue: "Mumbai"
with_client: 1

此外，我有一个event_type数据集，如下所示：

events: [
    {value: 1, label: "One-on-One meeting"},
    {value: 2, label: "Group meeting"},
    {value: 3, label: "Broker Roadshow"},
    {value: 4, label: "Broker Conference"},
    {value: 5, label: "Site Visit"},
    {value: 6, label: "Only Management Meet"},
    {value: 7, label: "Only IR Meeting"}
],

且with_client为true或false。

所以基本上我的最终数据看起来像这样：

client_name: "ABCD Company",
event_type: "Broker Roadshow",
type: "meeting",
venue: "Mumbai",
with_client: "yes"

目前我有一个v-for循环，如下所示：

<tr v-for="(item, index) in meeting_data">
    <td class="text-center">{{ index+1 }}</td>
    <td class="text-center">{{ item.client_names }}</td>
    <td class="text-center">{{ item.type }}</td>
    <td class="text-center">{{ item.event_type }}</td>
    <td class="text-center">{{ item.with_client }}</td>
    <td class="text-center">{{ item.schedule }}</td>
    <td class="text-center"><router-link :to="{name: 'interaction-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link></td>
    <td class="text-center"><a @click.prevent="deleteInteraction(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
</tr>

Answer 1

使用计算。

这假定您的meeting_data是一个对象数组。如果它是您在评论中建议的对象，那么请向我们展示一个示例，我将更新答案。

computed:{
  formattedData(){
    if (!this.meeting_data) return []

    return this.meeting_data.map(d => {
      return {
        client_name: d.client_name,
        type: d.type,
        // this find could blow up if the event_type doesn't exist
        event_type: this.events.find(e => e.value == d.event_type).label,
        with_client: d.with_client ? "yes" : "no",
        venue: d.venue
      }
    })
  }
},

迭代格式化数据。

<tr v-for="(item, index) in formattedData">

Example

根据你的笔，它看起来像这样：

computed: {
  tableFilter: function () {
    // Do the filter
    let interactions = this.model.interactions
    if(this.model.interactions)
    {
      interactions = this.model.interactions.filter((item) =>
      item.client_names.includes(this.search_by_name)
      && item.event_type.includes(this.search_by_event_type));
    }

    if (!interactions.length > 0) return []

    // Return formatted data
    return this.interactions.map(d => {
      return {
        client_name: d.client_name,
        type: d.type,
        // this find could blow up if the event_type doesn't exist
        event_type: this.events.find(e => e.value == d.event_type).label,
        with_client: d.with_client ? "yes" : "no",
        venue: d.venue
      }
    })
  }
}

这显然不是一个有效的例子，而是给你结构。

如何操纵vuejs中的数据

1 个答案: