Question

我正在尝试通过推入将另一个水果推入阵列。但这不起作用，当我运行它时，我得到的是相同的数组。
你能帮我吗？

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

Answer 1

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


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

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

Answer 2

您需要引用Vue实例，然后可以直接在实例上访问fruits数据属性：

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

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

我如何推入这个数组？

2 个答案: