You’re thinking too DOM, it’s a hard as hell habit to break. Vue recommends you approach it data first.
It’s kind of hard to tell in your exact situation but I’d probably use a v-for and make an array of finds to push to as I need more.
Here’s how I’d set up my instance:
1 2 3 4 5 6 7 8 9 10 11 | new Vue({ el: '#app', data: { finds: [] }, methods: { addFind: function () { this.finds.push({ value: '' }); } } }); |
And here’s how I’d set up my template:
1 2 3 4 5 6 7 8 9 | <div id="app"> <h1>Finds</h1> <div v-for="(find, index) in finds"> <input v-model="find.value" :key="index"> </div> <button @click="addFind"> New Find </button> </div> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
