我有一个包含 3 个区域的图像。当我单击每个区域时，我希望出现一系列问题。我已经这样做了，但我想稍微改变一下。 由于我不想将其重定向到页面，因此我给出#作为href链接，并且我正在获取基于 event.currentTarget.id 的区域的id 然后我有三个 v-if，每个组件都有一个条件。
这是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(){
}
}
});
我想按顺序完成问题，这意味着：首先做组件 1 的问题，单击提交以保存答案，然后显示组件 2 的问题，回答它们，然后移动到组件 3。
如果用户完成了组件 1，我希望他无法再次回答这些问题，以某种方式禁用它，然后转到组件 2。 当他完成下一个组件时，我也想禁用它并转到最后一个组件。
我不知道如何让它以这种方式工作。我有两个想法： 1) 当我单击"提交"按钮时，我将标志更改为 true。所以我知道组件 1 被单击，我将其添加到 v-if 子句中。我尝试使用 && 运算符添加它，但它不起作用。 2)提交后有一个下一个按钮(我不确定它听起来是否正常)，当单击该按钮时，显示组件2中包含的下一个问题。
P.S.My 数据库在Firebase上，我将所有问题都放在一个数组中。 例如，前 10 个问题是组件 1，接下来的 8 个问题是组件 2，依此类推。也许添加一个字段来分隔它们会更好吗？现在它是这样的：
{
"questions" : [ {
"q_options" : [ "Yes", "No", "Don't know" ],
"q_text" : "Do you agree with blah blah?"
}}
也许我可以添加一个component_option：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>
这是一个工作示例。
一些关键点。
- 您的地图区域似乎与问题直接相关，所以我只是将它们设为数据。然后，您可以迭代它们以制作图像映射。当您想将 Vue 重用于其他测验时，这将使您更容易。 你
- 真的不想显示和隐藏你所谓的"组件"。只需构建一个代表当前问题并更改其数据即可。通常在 Vue 中，您希望通过数据来驱动接口。
这并不完善，但它实现了您的主要目标;使用地图进行导航，并防止导航到已完成的问题。