javascript - 我想将对象插入 Vue.js 中的对象数组中

Question

我是 vue 新手，我正在尝试了解 vue 的整个概念以及如何使用它，现在我正在尝试学习列表。

JS:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    items: [
    {Name: "qwe"},
    {Name: "qwe"},
    {Name: "zxc"},
    {Name: "qwe"},
    {Name: "asd"}
  ] },
  methods: {
      items.push({Name: "tyu"})
}
})

HTML:

<div id="app">
    <ol>
      <li v-for="item in items">{{item.Name}}</li>
    </ol>
</div> 

Answer 1

methods 属性的 properties 应该是一个函数。

new Vue({
  el: '#app',
  data: {
    items: [
    {Name: "qwe"},
    {Name: "qwe"},
    {Name: "zxc"},
    {Name: "qwe"},
    {Name: "asd"}
  ] },
  methods: {
      // Create a function
      addItem: () => {
         this.items.push({Name: "tyu"});
      }
  }
})

现在您需要调用addItem函数。

使用按钮点击

<button (click)="addItem()">Add Item</button>

或

<button v-on:click="addItem()">Add Item</button>

加载时

new Vue({
  el: '#app',
  data: {
    items: [
    {Name: "qwe"},
    {Name: "qwe"},
    {Name: "zxc"},
    {Name: "qwe"},
    {Name: "asd"}
  ] },
  methods: {
      addItem: () => {
         this.items.push({Name: "tyu"});
      }
  },
  beforeMount(){
    // Call on page load.
    this.addItem()
  },
})

Vue.Js 有一个很棒的文档和示例。我强烈建议您阅读它。 https://v2.vuejs.org/v2/guide/