Vue.js圖像地圖點擊後禁用區域

Question

我有一個3區域的圖像。當我點擊每個區域時，我想要出現一系列問題。我已經這樣做了，但我想稍微改變一下。 因爲我不想把它重定向到一個網頁，我給＃爲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）當我點擊Submit按鈕時，我將標誌更改爲true。所以我知道組件1被點擊了，我把它添加到v-if子句中。我嘗試使用& &運營商添加它，但它不起作用。 2）提交後有一個下一個按鈕（我不確定它是否聽起來沒問題），當點擊它時，顯示組件2中包含的下一個問題。

PSMy數據庫位於Firebase上，我擁有全部數組中的問題。例如前10個問題是組件1，組件2的後8個，等等。或許最好是添加一個字段來分隔它們？現在是這樣的：

{ 
    "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進行不同的測驗時，這樣會更容易。
• 你並不是真的想顯示和隱藏你所稱的「組件」。只需構建一個代表當前問題並更改其數據的代碼即可。一般在Vue中，你想通過數據驅動你的界面。

這不是打磨，但它實現了你的主要目標;使用地圖進行導航，並阻止導航到完成的問題。