search

baggachipz / q-form-builder

Form Building using drag-and-drop. Uses Quasar Framework and Vue.
MIT License
150 stars 39 forks source link

Unable to edit loaded fields from database #13

Open Vanguardo66 opened 4 years ago

Vanguardo66 commented 4 years ago

Hi, first of all its so great. Actually it is fantastic. I love it.

I need a little help. When the user create a form for the first time, I save the formData as JSON in database and after that when the user reloads the old schema ans it is json parsed into formData there is no way to delete and/or edit old fields.

any suggestions would be appreciated.

baggachipz commented 4 years ago

You should be able to load the data into the variable you pass to v-model, provided it's in the same format. I would suggest loading the data in the created lifecycle event of the parent vue component and then invoking the q-form-builder component and pass that data in as the v-model. If you're having trouble with that, could you post some examples (i.e. through something like pastebin) and I can take a look.

Vanguardo66 commented 4 years ago

Thanks man for the quick reply. This is exactly what I have done. but neither I can edit a field nor delete it

created() { this.commonSetPageTitle("Form Schema") this.$q.loading.show({ spinner: QSpinnerGears }) this.fetch() }, methods: { fetch() { this.formFetch(this.$route.params.slug) .then(() => { if (this.formGetItem.schema) this.formdata = JSON.parse( this.formGetItem.schema.schema ) }) .finally(() => { this.$q.loading.hide() }) },

I will send a pastebin link ASAP.

Vanguardo66 commented 4 years ago

Sorry. I don't know why the codes are not formatted accordingly.

Vanguardo66 commented 4 years ago

CodePen

Here is the code pen but I couldn't figure how to include Quasar in it so it is not running the code

Screenshot from 2020-08-21 04-11-53

And the screen shot is after fetching the saved schema from DB. As you can see there is no delete button and also the edit tab is disabled (grayed out)

baggachipz commented 4 years ago

I would suggest stripping it all down to bare essentials, like not using Vuex. Put the value(s) you want to load right into a data object and pass that to v-model. If you can get that working, add in things like Vuex and see how it differs. Have you checked out and run the demo locally? I think it would give you a lot of insight into how to set up and run things.