Alternative usage scenarios for multi-select boxes
This check box is different from the favorite check box above. It does not need to collect the value, but only needs to know whether it is selected, that is, true or false. At this time, you can install the input box to write, directly go to Define strings, not arrays
Then fill in all the data
At this time, click the submit button, the form is refreshed, and it is usually provided to the backend through ajax or axios, and we will print it on the console
But clicking the submit button will refresh the form and page. To prevent the default behavior, you can use the @sumbit event to prevent form submission
@sumbit prevents the default commit behavior
@sumbit prevents the default commit behavior
In this way, the submission form will not be refreshed after clicking the button to submit
If the attributes are output one by one, these writes are very troublesome
Output (submit) the entire form at once
Generally, when using ajax or axios for front-end and back-end interactions, the collected data is generally organized into a json format and then passed to the back-end, so the output is definitely unreasonable
Method 1 using JSON.stringify
We can use JSON.stringify(this._data), use this,_data to get all the attributes of the form, and then convert the data in the form to JSON
It's okay to analyze
Method 2 Define the object to wrap all properties
Although the above method is possible, we try not to access this._data directly. Generally, we can define these form attributes into a large object
no problem
Although there is no problem with data acquisition, there is a small defect, that is, all places where v-model is used in the page must be prefixed with: userInfo.xxx
Modifiers for v-model
Introduce the modifiers for v-model in vue
number
If I now add an input box age
But the 12abc I entered
This input box must only be able to enter numbers, we need to control only numbers can be entered
native way
The original way can also be controlled, change text to number
If you enter it again, you will find that the input can’t be entered except for the value, and an increase and decrease symbol is added, which seems to be solved, but after careful observation, it is found that the value after age is a string, because the page still thinks that the input is something It is a character, which may cause it to be parsed into a string in a special scenario, causing an error
vue way
Vue provides its own solution, which can be solved directly after v-model followed by .number. It is
recommended to use two numbers together, so that the effect is better. One control can only input numbers, and one time conversion
:<input type="number" v-model.number="userInfo.age"><br/><br/>
Test again perfect solution
If not used together, it will cause a strange operation that can input letters but not convert
lazy
If lazy is not added, the data will be refreshed in real time, but if lazy is added, data will be refreshed when the focus is lost
trim
trim removes the spaces before and after
if trim is not added, the spaces we enter will also be collected
If trim is added, spaces will be automatically removed
Summarize
Collect form data
If:, the v-model collects the value value, and the user enters the value value
If:, the v-model collects the value value, and the value must be configured for the label
If:
1 No input value is configured attribute, then what is collected is checked (Boolean value, check true, uncheck false)
2 Configure the value attribute of Input:
(1) The initial value of v-model is non-array, then what is collected is checked (Boolean value, check true, uncheck false)
(2) The initial value of v-model is an array, then the collected value is an array of values Remarks
:
Three modifiers of v-model:
lazy: collect data after losing focus
number: input characters Convert the string to a valid number
trim: filter the trailing spaces and then parse