Manage data array from methods to template syntax Vue

Question

I used foreach to build a data array based on id. Initially all went well, but something happened. I think I was incorrectly using forEach. But after I console.log the array, it looks fine. Here is my code.

const Thread = Vue.component('threadpage', function(resolve) {
  $.get('templates/thread.html').done(function(template) {
    resolve({
      template: template,
      data: function() {
        return {
          data: {
            title: "Data Table Thread",
            count: {},
            list: {}
          }
        };
      },
      methods: {
        GetData: function() {
          var data = {
            username: "example-username",
            data: {
              page: 0,
              length: 10,
              schedule: "desc"
            }
          };
          var args = {
            "data": JSON.stringify(data)
          };
          var params = $.param(args);
          var url = "http://example-url";
          var vm = this;
          DoXhr(url, params, function(response) {
            count = JSON.parse(response).data.count;
            vm.data.count = count;
            var result = [];
            result_data = JSON.parse(response).data.data;
            result_data.forEach(function(item) {
              //console.log(item);
              result[item._id] = {
                _id: item._id
              };
            });
            vm.data.list = result;
            console.log(result);
          });
        }
      },
      created: function() {
        this.GetData();
      }
    });
  });
});

As in vuejs.org, I used v-for like this :

<tbody v-for="item in data.list">
    <tr>
        <td>
            {{ item._id }}
        </td>
    </tr>
</tbody>

The results don't display anything. Is something wrong with my template syntax? What is wrong with the code?

Bert · Accepted Answer · 2017-07-29 04:20:15Z

2

You define result as an array.

var result = [];

But you add objects to it by index, which I suspect is not quite what you want. If your _id values are alphanumeric, or not in sequence, this will result in a pretty strange array.

result[item._id] =  {
  _id : item._id
};

I expect you either want var result = {} or

result.push({_id: item._id})

If you want an array, your code should look like this:

var result = [];
result_data = JSON.parse(response).data.data;
result_data.forEach(item => result.push({_id: item._id}))
vm.data.list = result

Also, you are iterating over tbody tag. You probably want to iterate over tr.

<tbody>
    <tr v-for="item in data.list">
        <td>
            {{ item._id }}
        </td>
    </tr>
</tbody>

edited Jul 29, 2017 at 4:20

answered Jul 29, 2017 at 3:55

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

3 Comments

userpr Over a year ago

I used result.push but showing error "Cannot read property 'push' of undefined"

Bert Over a year ago

@userpr I'm not sure how that's possible when you define it a couple lines above, unless you are replacing it somehow.

userpr Over a year ago

Finally, my data appears as well!! Thank you so much sir :)

Nishant Kumar · Accepted Answer · 2017-07-29 03:55:01Z

0

You need to modify result[item._id] from result[item._id] = {_id : item._id}; to result[item._id] = item._id;

So final forEach block would be:

result_data.forEach(function(item) {
              //console.log(item);
              result[item._id] =  item._id
          });

then in the template you would able to get value

<tbody v-for="item in data.list">
    <tr>
        <td>
            {{ item._id }}
        </td>
    </tr>
</tbody>

answered Jul 29, 2017 at 3:55

Nishant Kumar

6,13120 gold badges72 silver badges97 bronze badges

1 Comment

userpr Over a year ago

thank you for your answer but the results is object : {}. But still not showing

Collectives™ on Stack Overflow

Manage data array from methods to template syntax Vue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related