javascript - 通过 Vue.Js 调查导航

Question

我正在使用 Vue.Js 进行调查，这基本上是应用程序的主要部分和目的。我的导航有问题。我的上一个按钮不起作用，下一个按钮一直在循环，而不是只前进到下一个问题。我想要完成的只是一次只显示一个问题，并使用 next 和 prev 按钮以正确的顺序浏览它们，并存储每个输入的值，稍后我将使用这些值来计算输出在调查结束后的结果页面上。我已经在 fiddle 上上传了我的代码的一个简短示例，其中只有两个问题只是为了展示问题。 https://jsfiddle.net/cgrwe0u8/

    new Vue({
  el: '#quizz',
  data: {
    question1: 'How old are you?',
    question2: 'How many times do you workout per week?',
    show: true,
    answer13: null,
    answer10: null

  }

})

document.querySelector('#answer13').getAttribute('value');
document.querySelector('#answer10').getAttribute('value');

HTML

    <script src="https://unpkg.com/vue"></script>

<div id="quizz" class="question">
    <h2 v-if=show>{{ question1 }}</h2>
    <input v-if=show type="number" v-model="answer13">
    <h2 v-if="!show">{{ question2 }}</h2>
    <input v-if="!show" type="number" v-model="answer10">
    <br>
<div class='button' id='next'><a href='#' @click="show = !show">Next</a></div>
<div class='button' id='prev'><a href='#' @click="show = show">Prev</a>
</div>
</div>

提前致谢!

Answer 1

您应该考虑制作一个用于调查问题的 Vue 组件，这样您就可以轻松创建多个不同的问题。

Vue.component('survey-question', {
  template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`,
  props: ['question']
});

我已经更新了您的代码并实现了 next 功能，以便您可以尝试创建 prev 功能。当然你应该再清理一下。也许在问题对象上添加一个属性，以便它可以设置 input 应该是什么类型。诸如此类的东西可以使其更易于重用。

https://jsfiddle.net/9rsuwxvL/2/