Vue.js selects the specified item of the dynamically bound radio

How to select an item of radio
write picture description here

The bound data is the same as the model above. When selecting radio or checkbox, it should be noted that:

Whether your checked property value is true or false, it will be checked.

To select or not to select, not to see the checked attribute value, but to see whether the checked attribute is present. Therefore, dynamic selection does not require v-model or checked='true', and it is good to judge whether the checked attribute needs to be rendered.

Change the view:

<input type='radio' :name='groupName' :checked='option.checked'>{{option.text}}

:checked='option.checked' If option.checked is true, he renders the checked attribute, otherwise the input element does not have this attribute.
After this binding, we set it in the methods of vue, set the checked attribute of the radio binding model of the current index to true, and the others must be set to false, so that it corresponds to the above binding, otherwise it is all true, There will be problems with binding.

checkOption: function (e, optionIndex) {  
        $.each(vm.options, function (index, item) {  
            item.checked = false;                                                     
        });  
        vm.options[optionIndex].checked = true;  
    }  

Reprinted from: http://blog.csdn.net/q646926099/article/details/72841044

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325624330&siteId=291194637