하고 싶은 일

만든 웹 서비스 reftika 응답 속도의 업.
외부의 서버를 사이에 두고 있기 때문에 아무래도 괜찮다.
웹 서비스에 대한 자세한 내용은 여기를 참조하십시오. "레퍼런스 협동 데이터베이스 기사를 무작위로 표시하는 웹 서비스를 vue.js에서 만들었습니다."

했던 일

검색 화면과 상세 화면 사이에 모달을 끼웁니다.
상세 화면을 불러오는데 아무래도 시간이 걸리기 때문에 천이 하지 않고 「가벼운 상세(모순된 표현이지만..)」를 모달로 표시할 수 있도록 했습니다.

아래는 검색 화면 ⇒ 모달 ⇒ 상세 화면의 천이를 gif로 한 것입니다.


이제 스마트 폰에서도 바삭 바삭한 많은 사례를 볼 수 있습니다!

구현

모달의 표시 방법 정리(초보자용)

1. 단일 파일 구성 요소
모달 윈도우- 기초에서 배우기 Vue.js

2. [ Vue.js ] 어디서나 호출 할 수있는 모달 구현 방법
제목대로. store를 사용하여 어디서나 재사용 가능한 모달을 만듭니다.

3. CDN 버전의 vue로 바삭하고 컴포넌트 작성
공식⇒ 공식 - 모달 구성 요소 예제 . LIG의 기사도 알기 쉽다. SPA만이 아니다! Vue.js[2] 모달 구현에서 볼 수 있는 Vue.js의 편리한 기능

※공식에 대해서
2.6.0 이후에서는 slot 속성에 의한 명명된 슬롯은 비추천이 되어 대신에 v-slot의 사용이 추천되고 있기 (위해)때문에 일단 주의.
slot 및 template 요소에서 사용하는 v-slot 속성을 사용하는 것이 좋습니다.
참조 : 공식 - 사용되지 않는 구문 - 슬롯 속성으로 명명된 슬롯

4.vue-js-modal 또는 vue-thin-modal 사용
github 링크
vue-js-modal
vue-thin-modal

vue-thin-modal은 개발 경위도 간단하게 블로그에 기재되어 있었다. ⇒ vue-thin-modal v1.0.0 출시 . 모달의 흔한 문제를 Bootstrap Modal이나 Modaal을 참고로 해결하고 있다는 것. 흔한 문제에 대해서는 알기 쉬운 슬라이드 첨부입니다.

다음은 vue-js-modal의 도입 샘플. github에서 인용.

npm install vue-js-modal --save

그리고,

main.js

Vue.use(VModal)

로서,

Home.vue

<template>
省略
<modal name="hello-world">
  hello, world!
</modal>
省略
</template>
<script>
methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}
</script>

하는 것만으로 호출할 수 있다. 편리합니다.
그 외에 jQuery를 사용하는 방법도 있지만, 익숙한 것 이외에 일부러 jQuery를 이용하는 이점은 있는 것일까.

이번에는 1가지 방법을 취했다.

Modal.vue

<template>
<transition name="modal" appear>
  <div class="modal modal-overlay" @click="$emit('close')"  >
    <div class="modal-window">
      <div class="modal-content">
        <p v-html="question" class="question"></p>
        <hr>
        <p v-html="answer" class="answer"></p>
      </div>
      <router-link :to="{ name: 'detail', params:{num:this.num}}">
        <button type="button" class="button">詳細を見る</button>
        </router-link>
    </div>
  </div>
</transition>
</template>
<script>
export default {
  name: 'Modal',
  data() {
    return {
    }
  },
  props: {
    question:String,
    answer:String,
    id:String,
    num:Number
  },
}
</script>
<style scoped>
省略
</style>

이 Modal.vue가 v-for로 표시되는 각 기사의 클릭으로 표시되도록 하고 싶습니다. 그래서 @click 에서 기사 index를 등록하는 함수 toggleDetail을 준비. 표시하고 싶은 기사 ID를 data의 modelIndex라고 하는 변수에 등록하는 것과 동시에, 모달의 표시·비표시(data의 isDetail 변수)의 토글도 실시하고 있다.
모달은 modelIndex를 기반으로 store에 기사 세부 사항을 얻으러 간다.

Result.vue

<div class="resultswrapper" id="resultswrapper">
  <div class="result" v-for="(refqa,index) in this.$store.state.message" v-bind:key='index'>
    <div  @click="toggleDetail(index)" >
    <div class="result-question">
      <p v-html="refqa.question"></p>
    </div>
    <div class="result-answer">
      <p v-html="refqa.answer" ></p>
    </div>
</div>
  </div>

  <Modal  @close="toggleDetail(modalIndex)" class="modal" v-if="isDetail[modalIndex]" :question=this.$store.state.message[modalIndex].questionAll :answer=this.$store.state.message[modalIndex].answerAll :id=this.$store.state.message[modalIndex].id :num=modalIndex />
</div>
省略
<script>
    methods:{
      toggleDetail:function(index){
        this.$set(this.isDetail, index, !this.isDetail[index]);
        this.modalIndex = index;
      }
    }
</script>

덧붙여서, 이 후의 수정으로 기사 상세 화면에서도 정보가 store에 있으면 store로부터 취득, 없으면(직접 액세스의 경우) 새롭게 취득하도록 변경했다. 이것으로 이전보다 꽤 바삭하게 움직이게 할 수 있었다.