You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+10-17Lines changed: 10 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,28 +6,24 @@ You can install the component using `npm i -S vue-survey-builder`
6
6
7
7
### Demo
8
8
You can see the demo [here](http://vue-survey-builder.s3-website-us-east-1.amazonaws.com/#/)
9
-
10
-
### Demo Source Code
11
-
Please look at the sample code [here](https://github.com/rajeshwarpatlolla/vue-survey-builder-test)
9
+
Please look at the souce code of the demo [here](https://github.com/rajeshwarpatlolla/vue-survey-builder-test)
12
10
13
11
### Steps to use
14
-
*Step 1:*
15
-
Once you it install, you can import the `SurveyBuilder`by
12
+
**Step 1:**
13
+
Once you it install, you can import the `SurveyBuilder`as shown below
16
14
17
15
`import SurveyBuilder from 'SurveyBuilder';`
18
16
19
-
*Step 2:*
20
-
Then you can use it in your vue component like this
17
+
**Step 2:**
18
+
Then you can use it in your vue component, as shown below
21
19
22
20
`<SurveyBuilder :options="sampleQuestion" />`
23
21
24
22
Here `sampleQuestion` can be the json, which is [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/survey-builder.json)
25
23
26
-
This is used to create a new question.
27
-
28
-
*Step 3:*
29
-
We are using [this JSON](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/survey-builder.json) to build any type of question. Depending on the type of question, only few keys are used in the whole JSON.
24
+
This is used to create a new question. We are using this JSON, to build any type of question. Depending on the type of question, only few keys are used in the whole JSON.
30
25
26
+
**Step 3:**
31
27
It emits an event called `add-update-question` with a question object and the type
When you get the object, you can cross check for the `id`, in the list of questions you have. If the `id` exists, then it means there is an update to the question, if the `id` doesn't exist, then you can directly add the question to the list of questions.
43
39
You can refer the sample code in the [demo repository](https://github.com/rajeshwarpatlolla/vue-survey-builder-test/blob/master/src/components/TestSurveyBuilder.vue#L30)
44
40
45
-
*Step 4:*
46
-
You can add your own logic in your component to show the list of question in read only and edit mode. There is a component to show the list of questions, which will be available in the [src folder](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/QuestionsView.vue) itself. Please use it in case, if you want to show the questions added.
41
+
**Step 4:**
42
+
You can add your own logic in your component to show the list of question in read only and edit mode. There is a component to show the list of questions, which will be available in the [demo source code](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/QuestionsView.vue). Please use this component called `QuestionsView`in case, you want to show the list of questions added.
47
43
48
44
In the next version, this component will be available as part of the vue-survey-builder itself. Refer demo code [here](https://github.com/rajeshwarpatlolla/vue-survey-builder-test/blob/master/src/components/TestSurveyBuilder.vue#L5)
49
45
@@ -87,14 +83,11 @@ You can use it like
87
83
#### 0.1.0
88
84
This version is the initial official release of this component. It has all the required functionalities to build the surveys using vue.js
0 commit comments