Why is my boolean always true when passing it as value to a radio component?

html checkbox value true/false
react checkbox
material-ui checkbox checked color
react-redux checkbox example
react checkbox value
react checkbox onchange
material-ui checkbox onchange not working
redux-form checkbox

so I am learning vue and have spent some time going through the documents and haven't seen the answer that solves my question. A lot of this is due to the nomenclature between using the CLI(which I am) and not.

I am trying to make it so that when one radio button is clicked it shows a div and when the other one is clicked it shows the other. Here is what I have.

Template:

<div id="daySelection">
    <div class="o-m-day">
        <div id="oneDay">
            <p>One day?</p><input v-model="selected" type="radio" name="oneDay" id="" class="r-button" value="true"> 
        </div>
        <div id="multipleDays">
            <p>Multiple days?</p> <input v-model="selected" type="radio" name="multDays" id="" class="r-button" value="false">
        </div>
    </div>
    <!-- the div where the conditional render will be rendered -->
    <div>
        <!-- multiple days -->
        <div v-show="selected" id="ta-multDays">
            <textarea  rows="10" cols="80" name="multDays" type="text" />
        </div>
        <!-- one day -->
        <div v-show="!selected" id="i-oneDay">
            <input type="text" name="r-oneDay">
        </div>
    </div>
</div>

Here is the script:

export default {
    name: 'CreateTournamentForm',
    data: function(e) {
        return {
            selected: Boolean,
        }
    },
}

above I was getting an error in the console that was saying that data needs to be a function that returns a new instance. I see many people and examples using vue instances differently where it is:

const app = new Vue({
    el: '#app',
    data: {
        selected: true,
    }
});

However whenever trying this Vue sends me a warning saying that it needs to be a function.

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

I am also aware that v-show toggles the display so I have tried both setting the display of the divs to:

display: none;

as well as not.

The problem is that the value of selected is a string, whereas you expect it to be a boolean.

The following watcher:

watch: {
    selected(newValue) {
        console.log("selected changed to", newValue, "which is a", typeof newValue);
    }
}

Will tell you this:

selected changed to true which is a string 
selected changed to false which is a string

The reason is that you give the fields value a string instead of a boolean. To fix this, instead of writing value="true", write :value="true".

You can play with a live example here.

Macromedia Flash Enabled: Flash Design & Development for Devices, Radio Button for Devices - groupwarne-the-name of the group for this radio button The actual type of this value will always be a string, so if you set this to be a number, have multiple radio buttons, their initialState should be set to true. You pass setState a single Boolean parameter, which represents the state to which  Because the HTML specification says that "value" is a "String." You need to convert it to a Boolean value if you want it as a Boolean. I know it's kind of a silly rule, but you have to remember that it's meant to be used in a way that any sort of value could come out of it:

There are two problems as far as I can see here:

In a component, the data key must be a function and the value for the selected key in the object returned by the data function must be an actual boolean value true or false (which will be initial value)

export default {
  name: 'CreateTournamentForm',
  data: function(e) {
      return {
        selected: true,
    }
  },
} 

By default, v-model values are treated as strings so your true and false values are actually the strings "true" and "false" which are both truthy. Changing your template code to the below (or alternatively using a number or string value instead) should fix it

<div v-show="selected === 'true'" id="ta-multDays">
    <textarea  rows="10" cols="80" name="multDays" type="text" />
</div> 

checkbox doesn't set `checked`, changes value between true/false , I'm a little confused by how checkboxes and radio buttons work in the example. how the values are passed from the redux-form field to your input component. set the value of a checkbox field to the boolean of true when it is checked. Without the checked property my checkboxes were always initially  Note: I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types.

I solved it by changing it from a 'v-show' to 'v-if'

<div>
    <p>One day?</p>
    <input 
        v-model="selected" 
        type="radio" 
        name="oneDay" 
        id="oneDay" 
        class="r-button" 
        value="onlyOneDay" /> 
</div>
<div id="multipleDays">
    <p>Multiple days?</p> 
    <input 
        v-model="selected" 
        type="radio" 
        name="multDays" 
        id="multDays" 
        class="r-button" 
        value="multipleDays" />
</div>

then the div to be shown as follows:

<div v-if="selected === 'multipleDays'" id="ta-multDays">
    <textarea  rows="10" cols="80" name="" type="text" />
</div>

<div v-if="selected === 'onlyOneDay'" id="i-oneDay">
    <input type="text" name="">
</div>

Radio Button Component - Appian 20.2, To save the index instead of a value, use radio buttons by index. If the choice is Boolean. Determines if a value is required to submit the form. Default: false. Default: true. If null is passed to Selected Value, none of the options are selected. It is a best practice for radio button components to always have a default value. document.feedback.field.checked = true; Radio Buttons. Annoyingly, there is no simple way to check which radio button out of a group is selected — you have to check through each element, linked with Boolean AND operators . Usually you'll just want to check if none of them have been selected, as in this example:

Radio Button By Index Component, If null is passed to Selected Index, none of the options are selected. It is a best practice for radio button components to always have a default value. Choice index  I was also struggling with getting the 'value' of my field data to determine whether the checkbox should be checked or not, and making sure form submissions included the 'value' rather than a boolean checked status. My underlying datasource has a value of 0/1 to determine whether a checkbox is unchecked/checked respectively.

Modeling Communication Networks and Protocols: Implementation via , Implementation via the SMURPH System Paweł Gburzyński The collection of signals passed to the method in the third argument always covers the complete population The Level component of that argument is zero, unless the transceiver is currently transmitting a packet of The method returns a Boolean value:YES,  Both radio button inputs will have the same id and name, so if you you use Html.LabelFor, it will link to the first radio button input in the DOM with that id. Like I said, I'm using this solutions for radio buttons to represent a boolean field, I just wanted people to know that labels will be a bit wonky. – Gromer Dec 19 '11 at 18:44

CGI Programming with Perl: Creating Dynamic Web Pages, still many browsers on the Internet that only support JavaScript 1.1, most notably and an array of radio button group elements that require a checked value. These lists are passed to requireValues, requireSelects, and requireRadios, in the validate object and returns a boolean value indicating whether there are any​  ;-) You have confused the COMPARISON operator '==' with the ASSIGNMENT operator '=' The boolean values "true" and "false" are synonymous with "HIGH" and "LOW" Your line boolean (mySet == true redefines mySet Just because it compiles doesn't make it right. 'C' is a truly, truly horrible language.

Comments
  • This may be a detail, but I suggest using v-if and v-else instead of v-show in your case. That way, if you need to change the conditions, you will have only 1 line to edit instead of 2, and if the condition becomes long the code will be simpler.
  • Thanks, I got it a little before you posted the help but thanks. I thought that using bind with type convert it but after playing around with it I saw that it was a string. Thanks a lot of your help!!!