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
+11-16Lines changed: 11 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,42 +11,41 @@ Please look at the souce code of the demo [here](https://github.com/rajeshwarpat
11
11
12
12
### Steps to use
13
13
**Step 1:**
14
-
Once you it install, you can import the `SurveyBuilder` as shown below
14
+
Once you install it, you can import the `SurveyBuilder` as shown below
15
15
16
16
`import { SurveyBuilder, SurveyBuilderJson } from 'vue-survey-builder';`
17
17
18
18
**Step 2:**
19
-
Then you can use it in your vue component, as shown below
19
+
You can use it in your vue component, as shown below
20
20
21
21
`<SurveyBuilder :options="SurveyBuilderJson" />`
22
22
23
-
Here `sampleQuestion` can be the json, which is [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/survey-builder.json)
23
+
Here `SurveyBuilderJson` is the json, which is used to form question object. Please take a look at it[here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/survey-builder.json)
24
24
25
-
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.
25
+
Depending on the type of question, only few keys are used in the whole JSON.
26
26
27
27
**Step 3:**
28
-
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.
38
+
Each question will have an `id` which is a UUID field. Once you get the question object form the above event, you can check the `id` of with with 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 that question to the list of questions.
40
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)
41
40
42
41
**Step 4:**
43
-
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.
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 called `QuestionsView`, to show the list of questions, which is available [here](https://github.com/FissionHQ/vue-survey-builder/blob/master/src/QuestionsView.vue). Please use this component `QuestionsView` in case, you want to show the list of questions added.
44
43
45
-
You can import it like,
44
+
You can import this component as shown below
46
45
47
46
`import { QuestionsView } from 'vue-survey-builder';`
48
47
49
-
and then use it like,
48
+
Once you import it, you can use it in your component as shown below
0 commit comments