使用 Polymer 访问嵌套在 Object 中的数组中的 Object 的值

Question

很抱歉这个标题不清楚

问题
我有一个数据 Object，其中包含一个包含多个 Object 的联系人数组。不幸的是，我无法访问嵌套 Object.

的值找到的类似问题的答案 here 解释了如何在 JavaScript 中访问它。 response.data.contacts[1].value 但是，使用 Polymer 只是打印代码而不是检索值。我相信问题出在我在绑定中使用的方括号中。 {{response.data.contacts[1].value}}

下面我添加了我的数据来阐明我在带有数组的 object 中的 object 值的意思，因为这有点令人困惑。我只想访问联系人数组中的值，而不是遍历所有联系人

{
  "data": {
    "contacts": [
     {
      "id": 259,
      "user_id": 248,
      "type": "phone",
      "value": "+1 (946) 315-2819",
      "created_at": "2016-08-24 18:12:30",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
     {
      "id": 260,
      "user_id": 248,
      "type": "phone",
      "value": "+1-979-427-7971",
      "created_at": "2015-12-08 04:10:19",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
    ]
  },
}

Answer 1

像这样bind to a subproperty of an array item, use an array item path：

{{response.data.contacts.1.value}}

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      response: {
        type: Object,
        value: () => ({
          "data": {
            "contacts": [{
              "id": 259,
              "user_id": 248,
              "type": "phone",
              "value": "+1 (946) 315-2819",
              "created_at": "2016-08-24 18:12:30",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, {
              "id": 260,
              "user_id": 248,
              "type": "phone",
              "value": "+1-979-427-7971",
              "created_at": "2015-12-08 04:10:19",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, ]
          },
        })
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <span>{{response.data.contacts.1.value}}</span>
    </template>
  </dom-module>
</body>

codepen

使用 Polymer 访问嵌套在 Object 中的数组中的 Object 的值

Accessing a value of an Object in an Array nested in an Object with Polymer

javascript

arrays

object

polymer

polymer-1.0