时间戳

首页 > 解决方案 > Vue 调查幻灯片

vue.js - Vue 调查幻灯片

问题描述

我正在做这样的调查：https ://takecareof.com/survey/new using vue。到目前为止，我有这个：

 <template>
     <div>
         <div class="col-md-4 col-centered">
             <div v-on:click="click()" class="survey-button"><slot></slot></div>
         </div>
     </div>
 </template>
 <script>
 export default {
     props: {
         answer: {
             type: String,
             default: null,
         }
     },
     data() {
         return {
            name: 'taest',
            show: true,
         }
     },
     methods: {
         click() {
             this.$parent.show = false;
             //console.log('Question: ' + this.$parent.quesiton);
             console.log('Quesiton: ' + this.$parent.getQuestion());
             console.log('Answer: ' + this.answer);
             console.log('Index: ' + this.$parent.getIndex());
         }
     }
 }
 </script>
 
 
 
 
 
  <template>
     <div class="row survey-question" v-show="show">
         <h1><slot></slot></h1>
     </div>
 </template>
 <script>
 export default {
     props: {
         question: {
             type: String,
             default: null,
         },
         index: {
             default: null,
         }
     },
     data() {
         return {
             name: 'parent',
             show: true,
         }
     },
     methods: {
         getQuestion() {
             return this.question;
         },
         getIndex() {
             return this.index;
         }
     },
 }
 </script>
 <style>
 .survey-question {
     padding-top: 8em;
     text-align: center;
 }

 </style>
   <div id="app">
                 <surveyquestion question="how_often" index="0">
                     Which one best describes you?
                     <div class="col-md-offset-3">
                         <surveybutton answer="every_week">I train every week</surveybutton>
                         <surveybutton answer="some_weeks">I train some weeks</surveybutton>
                     </div>
                 </surveyquestion>
                 <surveyquestion question="where_train" index="1">
                     Which best describes you?
                     <surveybutton answer="one_location">I train in one location</surveybutton>
                     <surveybutton answer="mult_locations">I train in multiple locations</surveybutton>
                     <surveybutton answer="want_mult_locations">I would like to be able to train in more than one location.</surveybutton>
                 </surveyquestion>
                 <surveyquestion question="how_travel" index="2">
                     Which one best describes you?
                     <surveybutton answer="between_cities">I travel between cities for work</surveybutton>
                     <surveybutton answer="interstate">I travel interstate for work</surveybutton>
                     <surveybutton answer="suburbs">I travel between suburbs for work</surveybutton>
                 </surveyquestion>
             </div>
         </div>

我不确定如何隐藏一个调查问题并显示下一个？我想这样做是为了方便插入新问题，而我只是难以隐藏和显示新问题。在代码中，有两个组件。第一个是调查按钮，下一个是调查问题。我只是把它们砸在一起。我是 StackOverflow 的新手。有什么建议么？

标签： vue.js

解决方案

this.$children您可以通过定义步骤 from和 a来充当根元素中的向导current_index。show = true然后仅显示current_index 处的子组件 ( )。

On click，surveybutton发出一个next事件，该事件递增current_index

在这里提琴

推荐阅读