1

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>
Guillermo Medel
  • 47
  • 1
  • 7
  • You already have your "questions[i]" in "question". That is the whole point of doing that. – digitalniweb Jan 08 '22 at 21:05
  • It's just a different combination that I tried. I've also tried question.bind and it still doesn't work. I'll edit it to show the question.bind version – Guillermo Medel Jan 08 '22 at 21:06
  • I think (pretty sure) you can't use v-model on v-for element... You need some container for that. – digitalniweb Jan 08 '22 at 21:10
  • Few things. Please use ESlint to check some errors that you could have. Don't use `i` for the `:key`, it's counter-productive. `:v-model` does not exist, it's just `v-model`. Also, [this](https://stackoverflow.com/a/68860455/8816585) may you. It's somehow showing that you will need to iterate on your array and apply the changes, it's not done out of the box for you. – kissu Jan 08 '22 at 21:12
  • Oh, I also recommend moving out of `v-model` in favor of `@input` or alike. Because `v-model` is usually good only for simple cases. Here, you may try `v-model="question[index].bind"` but I find it not that beautiful and I'm not sure if this may work. On top of the possibility of an index shift in your array.. – kissu Jan 08 '22 at 21:14

1 Answers1

0

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>
hesam ahrari
  • 51
  • 4