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

Javascript 从方法到模板语法Vue管理数据数组,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,我使用foreach构建了一个基于id的数据数组。最初一切都很顺利,但发生了一些事情。我想我没有正确地使用forEach的。但是在Iconsole.log数组之后,它看起来很好。这是我的密码 const Thread = Vue.component('threadpage', function(resolve) { $.get('templates/thread.html').done(function(template) { resolve({ template: te

我使用
foreach
构建了一个基于id的数据数组。最初一切都很顺利,但发生了一些事情。我想我没有正确地使用forEach的
。但是在I
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>

{{item.\u id}}

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

您需要修改
result[item.\u id]
from
result[item.\u id]={\u id:item.\u 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>

{{item.\u id}}

将结果定义为数组

var result = [];
但是你可以通过索引向它添加对象,我怀疑这并不是你想要的。如果您的
\u 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>

{{item.\u id}}

我使用了result.push,但显示错误“无法读取未定义的属性'push'”@userpr我不确定当您在上面几行定义它时,这怎么可能,除非您以某种方式替换它。最后,我的数据也出现了!!非常感谢先生:)谢谢你的回答,但结果是对象:{}。但还是没有表现出来