Iteration in Vue.js

Question

I am taking values from a Modal using below code.

<Modal :show="showModal" @hide="showModal = false" @submitted_job_data ="data_submitted"></Modal>

My Vue.js code is like below

<script>
  import Modal from './Modal';
  export default {
    data() {
      return {
        showModal: false,
        jobs: [],
      }
    },
    components: { Modal },
    methods: {
      data_submitted(value) {
        this.jobs.push(value);
        console.log(Object.values(this.jobs)); 
      }
    }
  }
</script>

I am iterating vales like below

<tbody>
   <tr v-for="job in jobs" :key="job.id">
    <td>
     {{ job[0] }}
    </td>
    <td>
     {{ job[1] }}
    </td>
    <td>
     {{ job[2] }}
    </td>
    <td>
     {{ job[3] }}
    </td>
    <td>
     {{ job[4] }}
     </td>
  </tr>
</tbody>

I am getting console result like below

Why I am getting Getter & Setter instead of value ?

Answer 1

Vue rewrites object properties to use a getter and setter so it can track when they are accessed.

https://v2.vuejs.org/v2/guide/reactivity.html

If you expand the object in the console you'll still be able to access the underlying value. The value isn't shown automatically because calling the getter could have side-effects.

As far as your other code is concerned you don't need to worry about the getter and setter, just use the objects like you normally would. e.g.:

<td>{{ job.company_name }}</td>

Answer 2

The v-for loop you do in your Template works and iterates the object, but the elements below are not correct. It should look like this:

<tr v-for="job in jobs">
  <td :key="job.id">
   {{ job.company_name }}
  </td>
</tr>

The getters and setters don't matter to you, you can ignore them and access the values in the object like usual: {{ job.company_name }}. It's an internal thing Vue does.

Working example: https://codepen.io/reynicke/pen/PMyLBb