访问Vue.js中数组中最后一个对象的属性答案

【问题标题】：Access attributes of the last object in array in Vue.js访问Vue.js中数组中最后一个对象的属性
【发布时间】：2018-03-16 12:49:54
【问题描述】：

我遇到了 Vue.js Javascript 墙。

这是我的代码：

<div id="app">
  <h1>Things</h1>
  <div v-for="thing in things">
    <input v-model="thing.val">
  </div>
  <button @click="addThing">
    NewThing
  </button>
  <pre>{{ $data | json }}</pre>
</div>
new Vue({
  el: '#app',
  data: {
    things: [],
    things2: [],
    things3: [],
    things4: []
  },
  methods: {
    addFind: function () {
      this.things.push({ val: '' });
      var l = this.things[this.things.length-1];
      this.things2.push(l);
      this.things3.push(l.val);
      this.things4.push(l["val"]);
    }
  }
});

things 和 things2 的输出正常且符合预期。 things3 和 things4 的输出不如预期。我无法访问数组中对象的“val”键。我不是 Javascript 对象方面的专家，但这应该可行，对吧？我错过了什么？如何访问“val”？

输出：

    {
  "things": [
    {
      "val": "first"
    },
    {
      "val": "second"
    },
    {
      "val": ""
    }
  ],
  "things2": [
    {
      "val": "first"
    },
    {
      "val": "second"
    },
    {
      "val": ""
    }
  ],
  "things3": [
    "",
    "",
    ""
  ]
}

这是一个演示：https://jsfiddle.net/rcLgmv18/3/

更新：现在很明显，由于某种原因，数组末尾有一个对象，带有 { val : "" }。如果我这样做（长度 - 2）而不是（长度 - 1），我会得到所需的行为。问题是为什么最后一个对象带有 val="" 有点奇怪？它是 Vue.js 还是 Javascript 功能？

【问题讨论】：

您正在访问数组最后一项的val 属性。该属性的值是空字符串 ""，这就是被推送到 things3 的内容。
this.things是一个对象数组，l是this.things的最后一个元素，所以它是一个key为val的对象。 l.val 从而给出一个空字符串。看起来很正常。你在期待什么？
@thanksd 你是最棒的！为什么最后一个元素是空的？我不明白...
@Psidom，我不认为是这样。做长度 - 2 修复它，因为长度 -1 出于某种原因是一个空对象，像那样奇怪。或者它可能不是一个空对象，但它有“val”=“”。超级奇怪，我不明白。
在 things1 和 things2 中，你推送一个对同一个对象字面量的引用。在 things3 和 things4 中推送一个新的字符串文字，它在创建时恰好是空字符串，因此在更新原始对象时不会更新。

标签： javascript arrays json vue.js javascript-objects

【解决方案1】：

我认为@JamesWesc 给出了最好的描述。我摆弄了一下，重命名了几个变量，以更清楚地描述我认为你所追求的......

new Vue({
  el: '#app',
  data: {
    finds: [],
    lastFind: {},
    lastFindVal: ''
  },
  methods: {
    addFind: function () {
      this.finds.push({ val: '' });
      this.lastFind = this.finds[this.finds.length-1];
      this.lastFindVal = typeof this.lastFind.val;
    }
  }
});

当我添加两个“查找”输入框时，这给了我这个输出，在第一个输入框输入“ab”，在第二个输入框输入“cd”。

{
  "finds": [
    {
      "val": "ab"
    },
    {
      "val": "cd"
    }
  ],
  "lastFind": {
    "val": "cd"
  },
  "lastFindVal": "string"
}

我不太明白为什么我不能让lastFindVal 输出"cd"，但我不是 Vue 开发人员。您可以看到它是一个字符串，并且看起来确实是一个空字符串。因此，@JamesWesc 似乎走在了正确的轨道上。它可能与框架有关吗？身份证

【讨论】：