我得到了显示测验页面的应用程序。代码中的示例测验应该显示给用户，但是我似乎无法在laravel中将主页和vue.js链接在一起。
ive能够在一个文件中在notepad ++上运行它，但是当我将其带到laravel项目中时，它不起作用。因为它需要放在两个不同的文件中
PHP代码：
<h1>{{ quiz.title }}</h1>
<!-- index is used to check with current question index -->
<div v-for="(question, index) in quiz.questions">
<!-- Hide all questions, show only the one with index === to current question index -->
<div v-show="index === questionIndex">
<h2>{{ question.text }}</h2>
<ol>
<li v-for="response in question.responses">
<label>
<!-- The radio button has three new directives -->
<!-- v-bind:value sets "value" to "true" if the response is correct -->
<!-- v-bind:name sets "name" to question index to group answers by question -->
<!-- v-model creates binding with userResponses -->
<input type="radio"
v-bind:value="response.correct"
v-bind:name="index"
v-model="userResponses[index]"> {{response.text}}
</label>
</li>
</ol>
<!-- The two navigation buttons -->
<!-- Note: prev is hidden on first question -->
<button v-if="questionIndex > 0" v-on:click="prev">
prev
</button>
<button v-on:click="next">
next
</button>
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h2>
Quiz finished
</h2>
<p>
Total score: {{ score() }} / {{ quiz.questions.length }}
</p>
</div>
</div>`
Vue.js code:
'// Create a quiz object with a title and two questions.
// A question has one or more answer, and one or more is valid.
var quiz = {
title: 'My quiz',
questions: [
{
text: "Question 1",
responses: [
{text: 'Wrong, too bad.'},
{text: 'Right!', correct: true},
]
}, {
text: "Question 2",
responses: [
{text: 'Right answer', correct: true},
{text: 'Wrong answer'},
]
}
]
};
new Vue({
el: '#app',
data: {
quiz: quiz,
// Store current question index
questionIndex: 0,
// An array initialized with "false" values for each question
// It means: "did the user answered correctly to the question n?" "no".
userResponses: Array(quiz.questions.length).fill(false)
},
// The view will trigger these methods on click
methods: {
// Go to next question
next: function() {
this.questionIndex++;
},
// Go to previous question
prev: function() {
this.questionIndex--;
},
// Return "true" count in userResponses
score: function() {
return this.userResponses.filter(function(val) { return val }).length;
}
}
});
应该向用户显示选择答案的问题，单击下一步，选择下一个答案，测验的结果将显示给用户。