我想將對象推送到 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/