我有3个区域的图像。当我点击每个区域时，我想要出现一系列问题。我做到了这一点，但我想稍微改变一下。 由于我不想将其重定向到某个页面，因此我将#with作为href链接，并且我根据event.currentTarget.id获取该区域的ID 然后我有三个v-ifs，每个组件都有一个条件。
这是jfiddle： https://jsfiddle.net/rau4apyg/
<div id="app">
<img id="Image-Maps-Com-image-maps-2017-03-16-100553" src="http://www.image-maps.com/m/private/0/fdfutap3klci37abfmuasc2mk7_screenshot.png" border="0" width="588" height="414" orgWidth="588" orgHeight="414" usemap="#image-maps-2017-03-16-100553" alt="" />
<map name="image-maps-2017-03-16-100553" id="ImageMapsCom-image-maps-2017-03-16-100553">
<area shape="rect" coords="586,412,588,414" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="component1" alt="" title="comp1" href="#" shape="poly" coords="420,228,296,34,180,226,178,228" style="outline:none;" target="_self" v-on:click="compId($event)" />
<area id="component2" alt="" title="comp2" href="#" shape="poly" coords="92,368,176,234,292,234,294,368,298,236,290,368" style="outline:none;" target="_self" v-on:click="compId($event)" />
<area id="component3" alt="" title="comp3" href="#" shape="poly" coords="506,366,296,366,296,232,422,232" style="outline:none;" target="_self" v-on:click="compId($event)" />
</map>
<h1> Title here </h1>
<div v-if="compid === 'component1'">
component1 is clicked, questions are shown
</div>
<!-- show questions in for loop -->
<div v-if="compid === 'component2'">
2 is clicked
</div>
<div v-if="compid === 'component3'">
3 is clicked
</div>
<div v-show="questionIndex === quiz.questions.length -1">
<button v-on:click="addAnswers">
submit
</button>
<h2>
Quiz finished, plase continue with Component 2 questions.
</h2>
<button v-on:click="goToNextComponent">
Next
</button>
</div>
new Vue({
el: '#app',
data: {
quiz: {
questions: [],
answers: []
},
// Store current question index
questionIndex: 0,
total:0,
show: true,
compid: '',
flag: false
},
mounted: {
//functions here
},
computed: {
//functions here
},
// The view will trigger these methods on click
methods: {
//some functions
//return id of clicked component
compId: function(event){
this.compid = event.currentTarget.id;
console.log(event.currentTarget.id); // returns the name of the id clicked.
} ,
addAnswers: function(){
//store answers in Firebase
//vm.$forceUpdate();
flag = true; //change the flag
console.log(flag);
},
goToNextComponent: function(){
}
}
});
我希望按顺序完成问题，这意味着：首先查看Component1的问题，单击“提交”以保存答案，然后显示Component2的问题，回答它们，然后转到Component3。
如果用户已完成Component1，我希望他无法再次回答这些问题，以某种方式禁用它，然后转到组件2。 当他完成下一个组件时，我也想禁用它并转到最后一个组件。
我不知道如何让它以这种方式运作。我有两个想法： 1）当我单击“提交”按钮时，我将标志更改为true。所以我知道单击组件1并将其添加到v-if子句中。我尝试使用＆amp;＆amp;＆amp;运营商，但它没有工作。 2）提交后有一个下一个按钮（我不确定听起来是否正常），点击它时，显示组件2中包含的下一个问题。
P.S.My数据库在Firebase上，我在数组中有所有问题。例如前10个问题是组件1，组件2的后8个，等等。也许更好的是添加一个字段来分隔它们？现在它是这样的：
{
"questions" : [ {
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "Do you agree with blah blah?"
}}
也许我可以添加一个component_option：1 您建议如何解决这些问题？
答案 0 :(得分：1)
我已经修改了你的方法。基本上你是在正确的轨道上;你只需要跟踪哪些问题已经完成。然后，当有人点击特定的图像地图时，检查是否已经完成，如果是，则阻止导航到它。
const quiz = new Vue({
el: '#app',
data: {
quiz: {
questions: [
{
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "Do you agree with blah blah?",
coords:"420,228,296,34,180,226,178,228",
shape:"poly",
completed: false,
answer: null
},
{
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "Question Number 2?",
coords:"92,368,176,234,292,234,294,368,298,236,290,368",
shape: "poly",
completed: false,
answer: null
},
{
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "Question Number 3?",
coords:"506,366,296,366,296,232,422,232",
shape:"poly",
completed: false,
answer: null
}],
answers: []
},
currentQuestion: null,
quizCompleted: false
},
methods: {
selectQuestion(question){
if (!question.completed)
this.currentQuestion = question;
else
alert("This question has already been completed!")
},
completeQuestion(){
this.currentQuestion.completed = true;
let currentIndex = this.quiz.questions.indexOf(this.currentQuestion);
if ( currentIndex === this.quiz.questions.length - 1){
this.quizCompleted = true;
this.currentQuestion = null;
this.quiz.answers = this.quiz.questions.map(q => q.answer)
} else {
this.currentQuestion = this.quiz.questions[++currentIndex];
}
}
},
mounted(){
this.currentQuestion = this.quiz.questions[0]
}
});
模板：
<div id="app">
<img id="Image-Maps-Com-image-maps-2017-03-16-100553" src="http://www.image-maps.com/m/private/0/fdfutap3klci37abfmuasc2mk7_screenshot.png" border="0" width="588" height="414" orgWidth="588" orgHeight="414" usemap="#image-maps-2017-03-16-100553" alt="" />
<map name="image-maps-2017-03-16-100553" id="ImageMapsCom-image-maps-2017-03-16-100553">
<area v-for="question in quiz.questions"
:shape="question.shape"
:coords="question.coords"
@click="selectQuestion(question)"/>
</map>
<div v-if="currentQuestion">
<h1> {{currentQuestion.q_text}} </h1>
<template v-for="(option, index) in currentQuestion.q_options">
<input type="radio" :value="option" v-model="currentQuestion.answer">
<label>{{option}}</label>
<br />
</template>
<button @click="completeQuestion">Complete</button>
</div>
<div v-if="quizCompleted">
<h1>You're Done!</h1>
{{quiz.answers}}
</div>
</div>
这是一个有效的example。
一些关键点。
这不是很好，但它完成了你的主要目标;使用地图进行导航，并阻止导航到已完成的问题。