Custom form design vue [survey]

Due to business needs, do custom satisfaction survey to find plug-in on-line is not satisfactory (insert documents and more, ui not change); own business is relatively simple; for various reasons, so it took a little time to develop a simple form design page .

This record development process

---

First look at the preview, transfer address:  http://fanfan18.gitee.io/customize-form-by-vue/

Pure vue development, no jQuery, data-driven page .

The introduction of file: IconFont icon file, vue.min.js, bomb box plugin (hint option can not be less than two)

Questions the left, the right form is a form, all data stored in the list.

The main function:

1. New left side [multiple choice questions, multiple choice, scoring title]
2. ------- upper right corner of the new kinds of questions into the current questions, and inserted below the current
3. Copy to copy the current issue ------- problems with the current value of the data to fill in, and inserted below the current
4. Delete to delete the current problem issues -------
5. New issue options
6. Delete the problem option (to stay at least two, playing box prompts can not be deleted)

Realization of ideas

1. Create a list a list of questions agreed data structure;
2. Page layout planning, writing page data rendered by v-if questions render judgment type selection mode;
3. From simple to add a start, push a new question type data, a new page appears corresponding to the kinds of questions;
4. Delete data, delete pages trigger event, pass the corresponding parameter in the method of execution splice delete the corresponding data array;
5. Copy the data, because the data structures for the object type, the need for deep copy, otherwise the assignment memory address, but in reality the same data, unified modification;
6. Add and delete option for nested operations, the page needs to pass a trigger event (type, data identification problem this entry id, the current option id), deletions method is still manipulate arrays;