Javascript Vue.js中的迭代

我使用下面的代码从模式中获取值

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

我的Vue.js代码如下所示

<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>

<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>

从“/Modal”导入模态；
导出默认值{
数据（）{
返回{
showModal：错，
职位：[]，
}
},
组件：{Modal}，
方法：{
提交的数据（值）{
这个.jobs.push（值）；
log（Object.values（this.jobs））；
}
}
}

我正在迭代如下所示的山谷

<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>

<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>

{{作业[0]}
{{job[1]}
{{job[2]}
{{job[3]}
{{job[4]}

我得到的结果如下

<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>

<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>

---

为什么我得到的是

Getter和Setter

而不是值？

Vue重写对象属性以使用Getter和Setter，以便它可以跟踪何时访问它们

如果在控制台中展开对象，您仍然可以访问基础值。该值不会自动显示，因为调用getter可能会产生副作用

就您的其他代码而言，您不需要担心getter和setter，只需像平常一样使用对象即可。e、 g:

{{job.company_name}

您在模板中执行的

v-for

循环工作并迭代对象，但下面的元素不正确。应该是这样的：

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

{{job.company_name}

getter和setter对您来说并不重要，您可以忽略它们并像往常一样访问对象中的值：

{{{job.company\u name}

。这是Vue的内部功能

工作示例：

---

到底是什么问题？你想要实现的目标与你目前拥有的有什么不同？谢谢@skillle。为什么我得到的是

Getter&Setter

而不是value？

Object.values（）

应该应用于

对象

而不是

数组

，我的意思是

作业是一个数组

。谢谢@skittle的回复。你能告诉我如何迭代对象吗？@abuab我不确定我是否理解——你已经在迭代对象了。你在说什么？谢谢@DaveNewton。迭代时，我在浏览器中没有得到任何输出。@我已经用一个输出值的具体示例更新了我的答案。谢谢@skirtle。在发布此问题之前，我尝试了您的解决方案，但它不起作用。谢谢