We Keep Coding

Dynamically create Form based on json data in vue js html? fiddle provided

I’m currently trying to get my feet wet with vue.js and am trying to build a form that is dynamically created.
In detail, I got json files that dictate what are the input types would go into that form; now I’m trying to wrap my head around how I could realize that in vue.js.
For example, when I got an json data, there need to come a select tag with different options, on clicking a particular option put text field inputs or options based on the json data in the form.
I guess thats where components would come in, but how can I dynamically render that and how would I include that without having tons of templates in my html.
v-for ?
The currently done fiddle is given, which have many problems.
https://jsfiddle.net/ahnu5zz9/
I need to send data as
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
After my first selection, is there any way to divide input field into components in vue.js and call components based on the selection?
So, when I select 1st option indian act, 1931, an input field comes there arms(if any). So in that case i need my v-model as bok.data[0].head.arms (if any). In next case when I select option 2. field with qty comes, so i need to send data as bok.data[0].head.qty.
In the 3rd case 1 select ker, both wild and enc comes as dropdown. On clicking this another input field comes. When I click wild, qty and item comes. So, I need to send this values as bok.data[0].value.qty and bok.data[0].value.item.
Also, I need to have multiple select options possible for wild and enc. I can able to select both wild and enc using multiple="".
I AM ASKING THIS IN SEARCH OF AN ANSWER. I have asked it from another account, but no body helped me.. Please help me.. In need of a help. I am a fresher please help me.. or please give a contact of anybody who can help me..

Change your input to
<input type="text" class="form-control" v-model="bok.data[0][all3.name]">
demo
or
<input type="text" class="form-control" v-model="bok.data[0]['value'][all3.name]">
data : [{head:null,value:{}}]
demo

select and input in one

Is there any plugin or way to make select with search option, and if there is no option like entered in search that entered value would be like input..
Have form with lots of manufacturers and models to select.. but also there is lots of new ones and want to make it in one place.. so that wouldn't need to go another page ant save the model or manufacturer..
for now thinking about making it with chosen plugin (https://harvesthq.github.io/chosen/) like tag input.. but still more want to make like select with input in one..
also must work with select/input with names of array like manufacturer_id[] etc..

Do you know Select2 ?
https://select2.github.io/examples.html
Maybe you can do something with it.

Selecting more than one value without checkboxes

Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?

Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)

One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.

How to store the tagged values (like gmail to field) as a string in a variable using html and javascript

Anyone please tell me a solution to solve this problem.
am using magicSuggest plugin to achieve a search box like autosuggestion drop down field.
and i got it working with database entries. but now am not able to get the value that selected by the user and displayed as a tag or like a token in a text box field.
i want to get the value as a string not as a tag or token like http://nicolasbize.github.io/magicsuggest/
i need a solution like exactly stack overflow's tags field above the post your question button in the post question page.
Thanks in advance

getValue() will return an array of values as specified by the valueField property (default to id)
getSelection() will return an array of records with all of their properties.
So dependeing upon your JSON records, you could easily get the values using one of those methods.

Multiple search options, single field, selected via drop down - js/jquery

I'm trying to essentially create a drop down menu tied to a field that allows me to search multiple sections of the back end of a site by choosing which section to search using the drop down.
What this will entail is assigning a variable to represent the input from the form and scripting to toggle between the different query strings that that variable will be used to complete.
At this point I'm basically just lost as to how to structure the javascript required to accomplish this.
Can I tie each query string to each option using an id and then create a function that runs when the form itself is submitted, constructing the needed query URL by combining the variable with the base URL included in the javascript?
Basically I need, say, the text dropdown selection to tell the page that it will be appending %query% to http://example.com/content/text/?q= when the form is submitted and letting the system handle the rest.
I would sincerely appreciate some input on how to structure the js/jquery to accomplish that. I know I need to tie the variable to the field and the URLs to be completed to the drop down based on ID but I'm not totally sure how.

Here are some jsFiddle examples of what you might want to do:
Pass the search term and dropdown select field in the query string to one page and have the page do something based on the choices. jsFiddle
Pass the search term to a page specified by the dropdown select field. jsFiddle
Pass the search term to a URL specified by the dropdown select field. jsFiddle

This is what I would do.
Have a eventhandler for onsubmit
In YourMehtod(){
1. get dropdown selection
2. get the URL and append query string
3.window.open(url,"_self")
}