Using VueJS, I have an array of questions to populate a form. The questions return on the page, but all the input forms are tied together - meaning if you type in any input form, the typed text appears in all the input forms. Can I v-bind the "for" attribute in the HTML label so that the "for" is something like "question.index" or "question.key", so that I can connect that same ID to the input?
All the input forms have the same ID and return the same information. I cannot figure out how to dynamically add the index or key from my array to the "for" attribute in the label and then the "id" attribute in the input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Project</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<div>
<h3>Questions</h3>
<label for="questions" ></label>
<ul>
<li v-for="(question, index) in questions">
{{question}}
<input type="text" id="questions" v-model="enteredValue"/>
<button @click="addAnswers()">Submit</button>
</li>
</ul>
</div>
<div>
<h3>Answers</h3>
<ul>
<li v-for="(answer, index) in answers">{{ answer }} </li>
</ul>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>
Vue.createApp({
data() {
return {
questions: [
'What is your name?',
'How old are you?',
'Where do you live?'
],
answers: [],
enteredValue: ''
};
},
methods: {
addAnswers() {
this.answers.push(this.enteredValue);
this.enteredValue = '';
}
}
}).mount('#app');