Currently, I am in the process of learning Vue.js and developing a basic poll generator. However, I have encountered an issue with radio inputs.
In this application, each question can be of two types - 'select' or 'range.' 'Select' represents a single-choice question while 'range' allows users to choose from 1-5 values using radio inputs (as illustrated in the image below; note that I will need to update the naming later on...).
The problem arises when rendering the poll as there are multiple radio input groups corresponding to each question, and selecting a value does not mark the checkbox as checked.
I retrieve the poll data along with questions and possible answers through axios.get method.
Here is a snippet of the template:
// Please see above code
Data:
data() {
return {
submission: {
email: undefined,
age: undefined,
answers: []
},
poll: {},
loading: false
}
}
updateAnswer:
// Please refer to the existing code above
TL;DR: How can I ensure that clicked radio inputs appear as "checked"?
Although I am able to capture the data for posting to the server, the issue lies in the visual aspect where the selected option is not visibly marked for the user.
Upon my research, it seems like setting a v-model for each input may resolve the issue. However, I am unsure about how to implement this in my current scenario.