Vue.js 单击后图像映射禁用区域

Question

我有一个包含 3 个区域的图像。当我点击每个区域时，我希望出现一系列问题。我已经这样做了，但我想稍微改变一下。因为我不想将它重定向到一个页面，所以我将 # 作为 href link 并根据 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(){
    }
}
});

我想按顺序做题，也就是说：先做Component1的题，点击提交保存答案，然后显示Component2的题，回答完之后再转到Component3。

如果用户完成了组件 1，我希望他无法再次回答这些问题，以某种方式禁用它，然后转到组件 2。当他完成下一个组件时，我也想禁用它并转到最后一个组件。

我不知道如何让它以这种方式工作。我有两个想法： 1）当我点击提交按钮时，我将一个标志更改为真。所以我知道组件 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 您有什么建议可以解决这些问题？

Answer 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。

一些关键点。

您的地图区域似乎与问题直接相关，所以我只是将它们设为数据。然后你可以迭代它们来制作你的图像映射。当您想为不同的测验重用 Vue 时，这将使它变得更容易。
您真的不想显示和隐藏您调用的内容 "components"。只需构建一个代表当前问题的问题并更改其数据即可。一般在Vue中，你想通过数据来驱动你的界面。

这还没有完善，但它实现了你的主要目标；使用地图进行导航，并防止导航到已完成的问题。

Vue.js 单击后图像映射禁用区域

Vue.js Image Map Disable area after click

html

vue.js

vuejs2

imagemap