Vue.js 이미지 맵 클릭 후 영역 사용 안 함

Question

3 개의 영역이있는 이미지가 있습니다. 각 영역을 클릭하면 일련의 질문이 나타납니다. 나는이 일을했지만 조금 바꿔보고 싶다. 페이지로 리다이렉트하고 싶지 않기 때문에 # href 링크로 제공하고 event.currentTarget.id를 기반으로하는 영역의 ID를 얻습니다. 그런 다음 조건이있는 3 개의 v-ifs가 있습니다. 각 구성 요소. 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(){ 
    } 
} 
}); 

내가 순서대로 질문을 완료 할 의미 :

이

는 jfiddle입니다 먼저 답변을 저장하려면 제출을 클릭, 컴포넌트 1의 질문을, 다음 컴포넌트 2의 질문 보여 , 대답을 한 다음 Component3으로 이동하십시오.

사용자가 Component1을 사용하는 경우이 질문에 다시 답할 수없고 어떤 식 으로든 사용하지 않도록 설정하고 구성 요소 2로 이동하면됩니다. 다음 구성 요소를 완료하면 해당 구성 요소를 사용하지 않도록 설정하려고합니다. 마지막 한 곳으로 가십시오.

나는이 방법으로 작동시키는 법을 모른다. 나는 두 가지 생각을 가지고있다. 1) 제출 버튼을 클릭하면 플래그가 참으로 변경된다. 그래서 구성 요소 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에서는 데이터를 통해 인터페이스를 구동하려고합니다.

이것은 광택 처리되지 않았지만 주요 목표를 달성합니다. 내비게이션을 위해지도를 사용하고 완성 된 질문을 탐색하는 것을 방지합니다.