Question

我使用foreach来构建基于id的数据数组。最初一切顺利，但事情发生了。我想我错误地使用了forEach。但在我console.log数组后，它看起来很好。这是我的代码。

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

就像在vuejs.org中一样，我使用v-for这样：

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

结果不显示任何内容。我的模板语法有问题吗？代码有什么问题？

Answer 1

您将结果定义为数组。

var result = [];

但你通过索引向它添加对象，我怀疑这不是你想要的。如果您的_id值是字母数字或不按顺序排列，则会产生一个非常奇怪的数组。

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

我希望您要么var result = {}或

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

如果你想要一个数组，你的代码应该是这样的：

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

此外，您正在迭代tbody标记。您可能希望迭代tr。

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

Answer 2

您需要将result[item._id]从result[item._id] = {_id : item._id};修改为result[item._id] = item._id;

所以最终forEach块将是：

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

然后在模板中你就可以获得价值

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

管理从方法到模板语法Vue的数据数组

2 个答案: