如何向此数组中添加元素？

Question

我试图使用 push 方法将另一个水果推入数组中，但它没有生效。当我运行这个程序时，我得到了相同的数组。
请帮忙看一下，谢谢！

HTML

<div id="app">
  <ul>
    <li v-for="fruit in fruits">
      {{fruit.name}}
    </li>
  </ul>
</div>

JavaScript

new Vue({
    el:'#app',
    data:{
        fruits:[
            {name:'apple'},
            {name:'banana'},
            {name:'orange'}
        ]
    }
})

vue.fruits.push({name:'pear'});

- Carlos

---

由于拼写错误vue->Vue，也许是这样的：this.Vue.fruits.push({name:'pear'}); - Arundeep Chohan

Answer 1

我得到的答案只是这样做：

var vueApp=new Vue({
    el:'#app',
    data:{
        fruits:[
            {name:'apple'},
            {name:'banana'},
            {name:'orange'}
        ]
    }
})

vueApp.$data.fruits.push({name:'pear'});

- Carlos

Answer 2

你需要有一个对Vue实例的引用，然后就可以直接在实例上访问fruits数据属性：

const comp = new Vue({
    el: '#app',
    data: {
        fruits: [
            { name: 'apple' },
            { name: 'banana' },
            { name: 'orange' }
        ]
    }
})

comp.fruits.push({ name: 'pear' })

- Decade Moon