Vuex: Update vuex forms document with instructions on how to handle radio buttons, checkboxes and select boxes in vuex

[nicolechung]

It seems like you can get select boxes, radio buttons and check boxes working with :checked but this isn't explained/documented in the forms document.

We managed to get select boxes working with:

<select name="birth_year"
                  @change="actionYEAR"
                  :checked="year" aria-labelledby="birth_date">
            <option value="">YYYY</option>
            <option v-for="(key, value) in year " :value="value">
              {{ value }}
            </option>
          </select>

Radio buttons/checkboxes with

<input type="radio" name="frequency" :value="0" :checked="selectedFrequency === '0'" @change="updateFrequency" />

[ktsn]

Thank you :)
We will consider to include more info about form handling in the documentation.

[ktsn]

Rethinking about this, adding description about select, radio and checkbox would let the docs to be verbose and it is not essential for this section. (the behavior is just the DOM behavior)

And we sometimes bind the store state to value of select, radio or checkbox.

So, I think it would be better to keep the form handling section on current form.
I am sorry I could not comply with your request.

[kdekooter]

I am sorry, folks I would happily accept verbose docs over a day of fruitless googling. At the moment it is a total mystery how vuex deals with radios.

[RedShift1]

Completely agree that the docs should provide these kinds of examples. In the long term it will be easier for new devs to pick up an existing project if a standard way of handling these kinds of things is provided. Besides that, documentation is supposed to be verbose...

Update: the Vue.js guide also has an example on how to handle radios.

[johndatserakis]

I'd like to add that I have had many issues using Vuex with checkboxes. The Vuex docs show an example using text inputs - but I'm finding that the way the browser handles the checked toggle state of a checkbox interferes with Vuex's store. This becomes especially weird when using e.preventDefault(). A lot of times I don't want to the checkbox to toggle until my mutation occurs - this seemed like a natural expectation, but it turns out to be very tricky.

I think it would be very beneficial to have an example showing how to simply bind a checkbox to a Vuex object/property of that object.

EDIT:

Let me put this here in the hopes it helps someone else dealing with a computed checkbox that doesn't toggle correctly when using e.preventDefault(). Evan had posted an example where he utilized a setTimeout function to make it work correctly - that worked for me, as now my checkbox is aligned with its computed properly correctly, and I can toggle the physical checkbox by changing the property in the Vuex store on a successful API call. Check it out here.

[GufNZ]

<input type="checkbox" :checked="checked" :data-wug="checked"/> renders to <input type="checkbox" data-wug="true"/> and not <input type="checkbox" checked data-wug="true"/> as expected.