v-html でHTML表示する

  2020/03/17

三重中括弧の mustaches

従来は、三重中括弧の mustaches で HTMLタグを表示することができました。


{{{ html }}}

ただ、Vue 2系から三重の中括弧が利用できなくなったようです。

v-html ディレクティブ

三重中括弧のの代わりに v-html ディレクティブを利用します。

ただし、利用する場合は XSSの脆弱性があるので、信頼できるサイトのみで利用しましょう。

Laravel で Nuxt.js を使ってみる（Docker環境）

  2020/03/15

Laravel 環境で Nuxt.js を利用してみたいと思います。
npm など基本的な環境がインストールされていることを前提とします。

基本的な情報は、以下のサイトを参考にすると良いでしょう。

https://ja.nuxtjs.org/guide/installation

nuxt インストール


$ npm install nuxt@2.11.0

Vue ファイルのサンプル確認

Nuxt.js のデフォルトは、同一ディレクトリに展開するため、Laravel プロジェクトと混在しないように、別途作業ディレクトリを作成します。

今回は「」」ディレクトリを作成します。


$ mkdir client

設定ファイル

「nuxt.config.js」ファイルを作成し、「client」を作業ディレクトリに設定します。


module.exports = {
  srcDir: 'src/',
}

プロジェクト作成

Nuxt.js プロジェクトを以下設問を答えながら作成します。


$ yarn create nuxt-app client ./client

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description My top-notch Nuxt.js project
? Author name Yohei Yoshikawa
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
...
  • Axios：サーバとAPI通信できるモジュール
  • ESLint：JavaScript 検証ツール
  • Prettier：JavaScript フォーマッター
  • Universal (SSR)：サーバ側でレンダリング

ディレクトリ構成

プロジェクトが作成されると、ディレクトリも自動的に作成されます。
各ディレクトリは以下のようなファイルを配置します。

  • assets：CSS や JavaScript ファイル
  • components：vue のコンポーネント
  • layouts：vue レイアウトファイル
    default.vue がデフォルトのレイアウトとなります。
  • middleware：共通処理をする場合に利用するミドルウェアファイル
  • node_modules：モジュールのパッケージファイル
  • pages：各ページ用の vueファイル
  • plugins：プラグインファイル
  • static：イメージファイルなど
  • store：データファイルなど

Nuxt 動作確認

Nuxt サーバ起動

nuxt コマンドでサーバを起動できます。


$ nuxt

nuxt のパスは「./node_modules/.bin/nuxt」です。

vue ファイルの作成

ブラウザ確認

デフォルトで「3000」ポートで起動確認できます。

http://localhost:3000/

index.vue に記載されたテンプレート「Hello World」が表示されることを確認します。

Laravel と Nuxt.js でAPI通信

Laravel でテストAPIを作成

routes/api.php に今回のテスト用の API (/api/test)を追加します。


Route::get('test', function() {
    return 'Lalavel Api Test';
});

API 動作確認

ブラウザで「Lalavel Api Test」が表示されるか確認します。

http://localhost/larablog/api/test

Axios モジュール

Nuxt.js で通信するために Axios モジュールを利用します。

nuxt-community/axio-modules

Next.js のプロジェクト作成でインストールしていますが、個別でインストールすることもできます。


$ npm i @nuxtjs/axios
//または
$ yarn add @nuxtjs/axios

Proxy モジュールインストール

Docker 環境で Nuxt.js + axios を利用するとポートの関係で通信ができません。 よって、Proxy を利用して通信ポートを設定します。


$ npm i @nuxtjs/proxy
//または
$ yarn add @nuxtjs/proxy

nuxt.config.js 設定

nuxt.config.js に 「axios」「proxy」モジュールを設定します。


module.exports = {
  srcDir: 'src/',
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    baseURL: 'http://localhost:3000'
  },
  proxy: {
    '/api': 'http://localhost/',
  },
}

Docker 環境で動作させると「http://localhost/」のリクエストがリジェクトされるため、プロキシを設定が必要です。


 ERROR  connect ECONNREFUSED 127.0.0.1:8000

上記では、axios のベースURLを「http://localhost:3000」（Nuxt.jsサーバのデフォルト）を設定します。

そして、proxy は /api を検出したら「http://localhost/」（ポート80）にアクセスできるようにします。

index.vue

まず、template タグのデータ部分を vue変数に修正します。

templateタグの下に、script タグで以下を追記します。


export default {
  async asyncData({app}) {
    const url = 'http://localhost/api/test' //Laravel の API URI
    const message = await app.$axios.$get(url)
    return {
        url,
        message
     };
  }
}

Nuxt サーバで動作確認


$ nuxt

Nuxt サーバを起動して、http://localhost:3000 にアクセスしてみます。

index.vue で設定した API URL 「http://localhost/api/test」でリクエスト、Laravel API の「Lalavel Api Test」がレスポンスされれば成功です。

IE11以下でclosest() を利用する

  2019/07/28

IE11以下では closest() を利用できません。 *最も近い親要素の取得 MDNによると、Elementにプロトタイプすることで対策できるとしている。 MDN: closest#Polyfill


    if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
    }
    if (!Element.prototype.closest) {
        Element.prototype.closest = function(value) {
        var element = this;
        do {
            if (element.matches(value)) return element;
            element = element.parentelementement || element.parentNode;
        } while (element !== null && element.nodeType === 1);
            return null;
        };
    }

コンポーネントを親に登録

  2019/07/28

親のVue にコンポーネントを登録することで、子のイベントを管理できる

コンポーネント作成（変数）


var コンポーネント変数 = Vue.extend({
      template: 'HTML',    //methods で登録したメソッドを実行可能
      data: function () { return { データ名 : 値 } },   //コンポーネント内で利用できる変数を登録
      methods: { コンポーネント内のメソッド }    //template 内で利用可能
)}

親に登録しない場合は、Vue.component() でもよい


var コンポーネント変数 = Vue.component('counter-button', {
      template: 'HTML',
      data: function () { return { データ名 : 値 } },
      methods: { コンポーネント内のメソッド }
})

コンポーネント登録


new Vue({
    el: "#id",
    components : { 'HTMLタグ名' : コンポーネント変数 }, //タグ名はケバブケース（kebab-case）
    data: { オブジェクト }  //Element内のオブジェクト
    methods: { メソッド }  //Element内のメソッド
}

サンプル（Vue.js入門 基礎から実践アプリケーション開発まで：第3章）

HTML


  

    

      {{fruit.name}}
      :
      
     //v-on:increment カスタムイベント設定し、他のメソッドを実行
    

    
Total: {{total}}

Javascript


    var counterButton = Vue.extend({
      template: '{{counter}} amounts ',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        addToCart: function () {
          this.counter += 1
          this.$emit('increment') //add custom event
        }
      }
    })
    new Vue({
      el: '#fruits-counter',
      components: {
        'counter-button': counterButton
      },
      data: {
        total: 0,
        fruits: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      },
      methods: {
        incrementCartStatus: function() {
          this.total += 1
        }
      }
    });
<< Top < Prev Next > Last >>