访问Vue.js

Question

我已经点击了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"]);
    }
  }
});

物品和东西2的输出很好并且符合预期。 thing3和things4的输出不符合预期。 我无法访问＆＃34; val＆＃34;数组中对象的键。我不是Javascript对象的专家，但这应该有用，对吧？我错过了什么？我如何访问＆＃34; val＆＃34;？

输出：

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

以下是演示：https://jsfiddle.net/rcLgmv18/3/

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

Answer 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似乎走在正确的轨道上。它可能与框架有关吗？ IDK