我正在使用 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>
提前致谢!
最佳答案
您应该考虑制作一个用于调查问题的 Vue 组件,这样您就可以轻松创建多个不同的问题。
Vue.component('survey-question', {
template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`,
props: ['question']
});
我已经更新了您的代码并实现了 next
功能,以便您可以尝试创建 prev
功能。当然你应该再清理一下。也许在问题对象上添加一个属性,以便它可以设置 input
应该是什么类型。诸如此类的东西可以使其更易于重用。
关于javascript - 通过 Vue.Js 调查导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43857749/