[Vuejs]-Vue.js post dynamic v-for value to database (Firebase)

by

0👍

I would change questions variable, v-for and v-models to work like the following and add an index variable to postAnswer method.

<b-row
    v-for="(question, index) in questions"
    :key="index">
 <form @submit.prevent="postAnswer">
          <textarea v-model="question.answer.content"></textarea>
          <input v-model="question.answer.authorname" />
          <b-form-select v-model="question.answer.authorage" value="select" name="age">
            <b-form-select-option v-for="n in 99" :value="n" :key="n">{{
              n
            }}</b-form-select-option>
          </b-form-select>
          <b-button @click="postAnswer(index)" type="submit">Submit your answer </b-button>
        </form>
</b-row>

Data would look like:

data(){
   return{
    questions:[] 
   }
}

When assembling the questions list make sure to add the answer key, something like:

this.questions = questions.map(q => {q.answer = {
     'authorname': '',
     'authorage': '',
     'content': ''
}})

Finally the postAnswer something like:

postAnswer(index){
  db.collection('answers').add({
    ...this.questions[index].answer,
    // I didn't understand what question was, but you can just specify here
    question: this.questions[index]
  })
  .then(docRef => this.$router.go(  ))
  .catch(error => console.log(err))
},

This way should work fine, tell me if I missed something

Leave a comment