How to dynamically add data in data() from a v-for

Question

I'm collecting questions from my database. I post these questions with v-for. I also create an input for users to answer these questions.

        <el-form v-model="answer" class="form-bilan" label-position="top">
            <el-form-item label="test" :label="question.question_without_html"
                                        class="form-bilan__label-input"
                                        :for="'question_' + question.id"
                                        :key="question.id"
                                        v-for="question in questions.questions"
                                        v-if="question.type == 'label-input'">
                <el-input :id="'question_' + question.id"></el-input>
            </el-form-item>
            <div style="clear: both;"></div>
        </el-form>

I would like to link these input (answers) to an object in data() to be able to send them with axios on my server

Do you have an idea of how?

data() {
  return {
    answer: {

            },
    }
}

Thanks !

Juan S.Montoya · Accepted Answer · 2019-08-15 19:21:15Z

You need to use v-model and bind the answers to a property in data, here a functional example:

var demo = new Vue({
    el: '#demo',
    data: {
      answer: null,
      questions: {
        questions: [
          { id: 1, type: 'label-input'},
          { id: 2, type: 'label-input'},
        ]
      },
      answers: {}
    },
    methods: {
      doClickAnswers () {
        console.clear();
        console.log(this.answers)
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="demo">
  <el-form
    v-model="answer"
    class="form-bilan"
    label-position="top">
    
    <el-form-item
      label="test"
      style="max-width: 200px;display: inline-block;margin: 0;"
      :label="question.question_without_html"
      :for="'question_' + question.id"
      :key="question.id"
      v-for="question in questions.questions"
      v-if="question.type == 'label-input'">
      
      <el-input :id="'question_' + question.id" v-model="answers[question.id]"></el-input>
      
    </el-form-item>
    </el-form>
    <button type="button" @click="doClickAnswers">answers</button>
</div>

Collectives™ on Stack Overflow

How to dynamically add data in data() from a v-for

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related