Nuxt Dynamic V-model

Question

I'm having difficulty binding my custom input to data(). I've tried several combinations to try to get it working and so far only the placeholder seems to work. I created an array called questions and its content is dynamically rendered to the page. On page load, my code determines if this is either a user or business account and then sets the value of the questions array based on the result which works fine. I created a test function to test if the v-model binding is working but I get an empty alert. I find it strange that the placeholder works just fine but not the v-modal bind.

<template>
  <section>
    <form>
      <BaseInput v-for="question in questions"
      v-model="question.bind" :placeholder="question.placeholder"/>
    </form>
    <button @click="test"></button>
  </section>
</template>

<script>
import BaseInput from '../BaseInput.vue'

export default {
  components: {
    BaseInput,
 },
  data(){
    return{
      firstName: '',
      lastName: '',
      commercialName: '',
      businessName: '',

      questions: [],

      userQuestionsArray: [
       { bind: 'firstName', placeholder: 'First Name' },
       { bind: 'lastName', placeholder: 'Last Name' },
      ],

      businessQuestionsArray: [
       { bind: 'commercialName', placeholder: 'Commercial Name' },
       { bind: 'businessName', placeholder: 'Business Name' },
      ]
     }
    }
  },
  methods: {
    test(){
      alert(this.password)
    }
  },
  mounted() {
    if(this.$store.state.userType === 'Personal'){
      this.questions = this.userQuestionsArray;
    }else {
      this.questions = this.businessQuestionsArray;
    }
  },
  computed: {
      userType: {
        get () {
        return this.$store.state.userType
      }
    }
  }
}
</script>

Answer 1

you cant use v-mode in v-for. you must use wrapper like template or tag over each input.

<template>
  <section>
    <form v-for="(question, index) in questions" :key="index">
      <BaseInput v-model="question.bind" :placeholder="question.placeholder"/>
    </form>
    <button @click="test"></button>
  </section>
</template>