vue 動的コンポーネント
ステータスによって、表示内容を変えるような時、v-ifが増えてきて見通しが悪くなる。
どうするんだ？
How to use ImageMap in Nuxt
イメージマップをnuxtjsで使おうと思って試行錯誤した結果。
こんな感じでvueファイルを用意して、npm run devにて動作を試したけれど
リロードやリサイズしないと。イメージマップが有効に機能しない。なぜだ？！
nuxtjsだから？
為にしvue単体（ルーターなし）で実行して見たら。問題なく動いた。
またnuxtjsでもトップページで動かしたら動く。
nuxt-linkで遷移後の画面だと動かない。
<template> <section class="container"> <img src="map.png" usemap="#ImageMap" alt=""> <map name="ImageMap"> <area shape="rect" coords="549,424,597,456" href="#" alt="" @click="link($event, 22)"> <area shape="rect" coords="599,424,647,461" href="#" alt="" @click="link($event, 14)"> <area shape="circle" coords="65,62,36" href="#" alt=""> </map> </section> </template> <script> import $ from 'jquery' require('image-map') export default { mounted() { $('img[usemap]').imageMap() },
以下、動かないサンプルのnuxtjsアプリです。
Nuxt.jsでJQuery+ maphilightを使う
https://www.npmjs.com/package/maphilight
こんな感じで使って動いたようだけど。。あっているのかわからない。
<script> import $ from 'jquery' require('maphilight') export default { mounted() { $('.map').maphilight() } }
Nuxt.js generateしたものをGithub pagesへデプロイでハマる
nuxt.config.jsの編集
router: { base: process.env.DEPLOY_ENV == 'GH_PAGES' ? '/<your repository name>/' : '/' }
こちらが素晴らしい
qiita.com
私の問題は、vueの方の定義がhrefの１文字目に/を入れていたのが問題だったようで。
あとは、パラメータを渡すところがうまく動かないなぁ。。
そもそも
aタグで書いていて、nuxt-linkにしたら１文字目/で普通に動きました。おいおい。。
