So, v-model gets the type of data and automatically convert user input to that data type.
But the ref works in the different way. It doesn't convert the data.
for the check box,
for the radio buttons,
we need to add 'value' attribute to pick one data and make the app to save that one data.
check if user input is valid or not
and if it is invalid then apply some CSS effect
if we give 'type' here then we can stop the action of button that automatically submitting.
The type="button" attribute is used in the <button> element to specify the type of the button. In this particular code snippet, type="button" is used to explicitly indicate that the button should behave as a regular button and not as a submit button.
By default, if the type attribute is not specified or if its value is set to "submit", the <button> element will act as a submit button within a form. This means that if the button is clicked, it will trigger a form submission and potentially reload the page or perform some other action associated with form submission.
In this case, setting type="button" ensures that the button does not trigger a form submission. Instead, it will execute the specified action defined by the @click directive. By using type="button", you can control the behavior of the button and prevent unintended form submissions when you don't want that behavior.
It applies the CSS effect, when the bonded data 'activate'
- The <ul> element represents an unordered list.
- Inside the list, there is an <li> element, which represents a list item.
- The :class="{activate: activeOption === 'poor'}" is a Vue.js directive. The :class directive binds the class attribute of the element to the result of the expression activeOption === 'poor'. It applies the CSS class activate to the <li> element if the expression evaluates to true. In other words, if activeOption has a value of 'poor', the activate class will be added to the <li> element.
- Inside the <li> element, there is a <button> element.
- The @click directive is another Vue.js directive that binds a click event to a method. In this case, when the button is clicked, it will trigger the activate('poor') method.
- activate('poor') is the method that will be executed when the button is clicked. It takes the argument 'poor'.
In summary, this code creates a button inside a list item. When the button is clicked, it triggers the activate method with the argument 'poor'. The activate method likely has some logic to handle this event, such as updating the value of activeOption, which in turn may cause the activate class to be added or removed from the <li> element, depending on its current value.