【问题标题】:How to access child component data in VueVue中如何访问子组件数据
【发布时间】:2019-05-23 06:11:02
【问题描述】:

我正在制作课程评估表,里面有这样的问题组件:

<question v-for="(question,index) in questions"
                :questionText="question.questionText"
                :question-index="++index"
                ref="questions"> </question>

每个问题都有单选按钮和一个与 v-modal 连接的结果字段。我想将每个问题的结果提交到 firebase 数据库。

我需要从评估表单(父级)访问结果,或者在问题组件中有一个提交函数并调用它以使每个问题都提交其数据。

我尝试了 refs 但失败了,我也发现事件很困难,最简单的方法是什么?

【问题讨论】:

标签: javascript vue.js firebase-realtime-database


【解决方案1】:

我通过事件找到了解决方案:

对于那些在活动中也遇到困难的人

这是我的解决方案:

关于问题(孩子):

            <input type="radio" :value="point" v-on:click="sendAnswer(point)" v-bind:name="'answer' + questionIndex">

methods: {
  sendAnswer: function(point) {
    this.answer = point;
    const index = this.questionIndex-1;
    this.$emit('send-answer', {answer: this.answer, index: index});
  },
}

在父级上:

<question v-for="(question,index) in questions"
                    :questionText="question.questionText"
                    :question-index="++index"
                    @send-answer="getAnswer"> </question>
    getAnswer(e) {
      this.answers[e.index] = e.answer;
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-08-03
    • 2017-10-17
    • 2019-10-02
    • 2019-11-05
    • 2017-12-27
    • 2019-02-27
    • 2016-08-14
    • 2022-01-22
    相关资源
    最近更新 更多