Question

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

＆＃13;

 <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>

＆＃13;

   <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>

＆＃13;

我不确定如何隐藏一个调查问题并显示下一个？我想这样做是为了让我很容易插入新的问题，我只是在隐藏和展示新问题时遇到了麻烦。在代码中，有两个组件。第一个是调查按钮，第二个是调查问题。我把它们一起砸碎了。我是StackOverflow的新手。有什么建议？

Answer 1

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

在click上，surveybutton发出next事件，该事件会增加current_index

Fiddle here

Vue Survey幻灯片

1 个答案: