How to manipulate data in vuejs

Question

I'm building a small application using vuejs where I'm calling a url to get some data. I need to manipulate the data before showing it. In the response I'm receiving an array of elements which has fields

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

Additionally I have a data set of event_type that looks like this:

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"}
],

and with_client is true or false.

So basically my final data will look like something like this:

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

Currently I'm have a v-for loop that looks like this:

<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>

But I'm taking the response data in a variable something like: model: {} then how can I call in computed? — Nitish Kumar
– Nitish Kumar, Commented May 31, 2017 at 17:22
Can you give us a small working example? Or some actual data? Formatted correctly with your Vue code. — Bert
– Bert, Commented May 31, 2017 at 17:23

Bert · Accepted Answer · 2017-05-31 17:47:24Z

1

Use a computed.

This assumes your meeting_data is an array of objects. If it's an object as you suggest in your comment, then show us an example and I'll update the answer.

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
      }
    })
  }
},

Iterate over the formatted data.

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

Example.

Based on your pen, it would look something like this:

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
      }
    })
  }
}

That's obviously not a working example but gives you the structure.

edited May 31, 2017 at 17:47

answered May 31, 2017 at 17:30

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nitish Kumar Over a year ago

Hi I'm already having tableFilter for search module, can you have a look at codepen.io/anon/pen/xdvWma?editors=1010 though this is not working properly.

Bert Over a year ago

@NitishKumar just modify the tableFilter to return the formatted data.

Collectives™ on Stack Overflow

How to manipulate data in vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related