• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

165
Views
Push data and key into array in vuejs

I have a array in data() :

data()  {
  return {
    list: [],
 }
},

methods: {
  pushData() {
     this.list.push({name:'yorn', age: 20});
  }
}

Now I want to push to the 'list' array of the following format, The key is info:

list [
     info [
     {
       name:yorn,
       age: 20
     }
  ]
 ]

I'm new to vuejs and javascript so I need everyone's help. Please give me your opinion. Thanks

about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

I want to push to the 'list' array of the following format, The key is info

list: [ info: [ { name:yorn, age: 20 } ] ]

The above expected result is not a valid JSON. It should be like below :

list: [{
    info: [{
        name: yorn,
        age: 20
    }]
}]

Working Demo :

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted() {
    this.pushData();
  },
  methods: {
    pushData() {
      this.list.push({info : [{name:'yorn', age: 20}] });
      // Or you can also use below one.
      // this.list[0].info.push({name:'yorn', age: 20});
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(obj, index) in list" :key="index">
    <p v-for="(item, i) in obj.info" :key="i">{{ item.name }}       </p>
  </div>
</div>

about 3 years ago · Juan Pablo Isaza Report

0

You can simply use like below

pushData() {
 let data = { info : [{name:'yorn', age: 20}] }
 this.list.push(data);

}

Hope this is helpful. :-)

about 3 years ago · Juan Pablo Isaza Report

0

Try altering the pushData method to have data parameter

pushData(data) {
 this.list.push(data);
}

Invoke the method

this.pushData({name: "john", age: 25});
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error