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

我碰到了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"]);
    }
  }
});

下面是一个演示：

---

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

我认为@JamesWesc给出了最好的描述。我做了一些修改，重新命名了几个变量，以便更清楚地描述我认为你们在追求什么

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

当我添加两个“finds”输入框时，在第一个框中输入'ab'，在第二个框中输入'cd'，就会得到这个输出

---

我不太明白为什么我不能让

lastFindVal

输出

“cd”

，但我不是Vue开发人员。但是您可以看到它是一个字符串，并且看起来确实是一个空字符串。因此，@JamesWesc似乎走上了正确的道路。这可能与框架有关吗？IDK

您正在访问数组最后一项的

val

属性。该属性的值是空字符串

”

，这就是推送到

things3

的对象。things是一个对象数组，

l

是

this的最后一个元素。things

，因此它是key

val

的对象

l.val

因此给出一个空字符串。看起来很正常。你在期待什么？@谢谢你是最好的！为什么最后一个元素是空的？我不明白…@Psidom，我不认为是这样的。执行length-2修复了它，因为length-1出于某种原因是一个空对象，有点奇怪。或者它不是空对象，但它有“val”=“”。超级奇怪，我不明白。在1和2中，你推送一个对同一个对象的引用。在things3和things4中推送一个新的字符串文本，它在创建时恰好是空字符串，因此在更新原始对象时不会更新。

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

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