Vue.js 将动态 v-for 值发布到数据库 (Firebase)

Question

facing major issues in processing a dynamic value from a v-for loop into my database. In my Vue app, I am displaying questions in a v-for loop and the users can answer to each question through a form. Additionally to the user input, I want to pass the value of the question they answered (current question object) to my database (Google Firebase).

V-for loop + form looks like this: :

<b-row
    v-for="question in questions"
    :key="question.content"
  >

 <form @submit.prevent="postAnswer">
          <textarea v-model="content"></textarea>
          <input v-model="authorname" />
          <b-form-select v-model="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 type="submit">Submit your answer </b-button>
        </form>

The form is displayed under each question and the user has the possibility to answer the question.

Data objects:

data() {
return {
  authorname: null,
  authorage: null,
  content: null,
  question: null,
  questions:[],
  answers: [],
};

},

The data is added into Firebase through:

postAnswer(){
  db.collection('answers').add({
    authorname: this.authorname,
    authorage: this.authorage,
    content: this.content,
    question: this.question
  })
  .then(docRef => this.$router.go(  ))
  .catch(error => console.log(err))
},

Now as you can see, I do not only want to pass the user's input to my collection on the db but also the question they refer to in the v-for loop. How can I achieve this?

Thanks a lot

Answer 1

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