v-for深度遍历数据的表单实战应用

项目场景：

在项目中用到v-for来遍历表单，简单的用法就不介绍了。

• 如何解决在项目中嵌套数据的问题
• 如何做深度的遍历
• 如何实现一个调查问卷
• v-for遍历数组中的数组

---

类似于以下这种数据（要实现一个调查问卷，要做深度遍历的情况）：

这里实现了：

• 一个调查问卷的渲染
• 拿出 value 值并给到 answer 中以便后期操作

根据不同id遍历 question 题目，然后再二次遍历 resource 中的选项

---

用法：

在这里我用到了bootstrap4.5中的组件样式（当然elementUI的样式相对代码少一些）
v-for="item in sleepForm" :key="item.id" 这里v-for循环遍历，内部 {{ item.question }} 渲染；
二次渲染的时候v-for="it in item.resource" :key="it.id" :label="it.value" 这里将 resource 中的值取出来对其中的 {{ it.name }} 进行动态渲染。

因为用到了bootstrap的缘故，这里的数据的结构设计的有点复杂了：
v-model="item.answer 将数据绑定的value值最后整合到answer中；
:data-target="'#' + item.data_target" B的折叠下拉功能，用来操作下拉。
:id="item.data_target B的下拉内容的展示，这里都用到了v-bind 。

---

再来看看传统手艺：

最近在做一个类似于表单的页面，最开始用到了“传统手艺”，但是这样写页面太过冗余。

大概就是为了实现这样的界面：

但是这个“传统手艺”写一个界面用上千行显然不合适。

---

附上 js 取出 value 值并合并数组的方法：

	getAnswers() {
      const answers = this.sleepForm.map((item) => item.answer);
      console.log(answers);
    },

得到的结果是这样的：

附带项目代码地址链接

---

接下来对这个得到的数据进行操作即可。