Vue.js 中的迭代答案

【问题标题】：Iteration in Vue.jsVue.js 中的迭代
【发布时间】：2019-08-11 03:42:37
【问题描述】：

我正在使用以下代码从模态中获取值。

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

我得到如下控制台结果

为什么我得到的是Getter & Setter 而不是价值？

【问题讨论】：

到底是什么问题？您想要实现的目标与您目前拥有的目标有何不同？
谢谢@skirtle。为什么我得到 Getter & Setter 而不是 value ？
Object.values() 应该适用于objects 而不是arrays，我的意思是jobs is a array。

标签： javascript vue.js iteration

【解决方案1】：

Vue 重写对象属性以使用 getter 和 setter，以便跟踪它们何时被访问。

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

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

就您的其他代码而言，您无需担心 getter 和 setter，只需像往常一样使用对象即可。例如：

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

【讨论】：

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

【解决方案2】：

您在模板中执行的v-for 循环有效并迭代对象，但以下元素不正确。它应该是这样的：

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

getter 和 setter 对你来说并不重要，你可以忽略它们并像往常一样访问对象中的值：{{ job.company_name }}。这是 Vue 做的内部事情。

工作示例： https://codepen.io/reynicke/pen/PMyLBb

【讨论】：