Help us understand the problem. What is going on with this article?

Vue.jsのv-forで分割代入をする

More than 1 year has passed since last update.

Vue.jsv-for ディレクティブでオブジェクトの分割代入のようなことをしたいと思ったのですが、「Vue.js 分割代入」や「v-for 分割代入」のように検索してもヒットせず、英語で「Vue.js Destructuring assignment」と調べたところ、Vue.js quick tip: Using destructuring assignment in for loops という記事を見つけました。

分割代入イメージ
<ul>
  <li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>

記事によれば v-for ディレクティブ内でも分割代入が使えるとのことだったので、試してみました。

v-for ディレクティブで分割代入を使ってみる

Vue.jsを試すのに一番お手軽なCDN版を使って試してみました。

テストページ

v-for-destructuring-assignment.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js v-for 分割代入テスト</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  <script>
    (function () {
      'use strict';

      var app = new Vue({
        el: '#app',
        data: {
          products: [
            { name: 'Product 1', price: 300 },
            { name: 'Product 2', price: 100 },
            { name: 'Product 3', price: 200 }
          ]
        }
      });
    })();
  </script>
</body>
</html>

モダンブラウザであれば、このようなリストが表示されます

気になったところ

Vue.js 公式ドキュメントに記載がない(テストコードはある)

公式ドキュメントの リストレンダリング — Vue.js には分割代入に関する記載がないのですが、vuejs/vue (GitHub)テストコードには分割代入に関するテストがありました(if (supportsDestructuring) に続くブロック)。
実際にテストコードを実行することはしませんでしたが、 Vue.js としては v-for ディレクティブ内での分割代入(オブジェクトの分割代入だけでなく、配列の分割代入も)をサポートしているのではないかと思われます。

CDN版Vue.js & Internet Explorer 11の組み合わせでは使えない

Vue.js quick tip: Using destructuring assignment in for loops の記事に、「ES6の機能を使っているのでIEではサポートしていない」のような記述があることに気づきました。

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality (ignoring the fact, that old browsers, which almost nobody uses, don't support those features - namely IE).

テストコードの supportsDestructuring の定義を見ても、分割代入構文をサポートしている場合にのみテストを実行しているように見えます。
(この supportsDestructuring
ですが、以前にQiitaに書いた【JavaScript】ES6やES2017の構文が使えるか判定する方法の記事と同じ方法で分割代入構文が使えるか判定しているようです)

実際、上に記載したHTML(テストページ、CDN版Vue.jsを使用)をIE11に読み込ませたところ、リストを表示することができませんでした。
ですので、CDN版Vue.js & IE11の組み合わせでは分割代入を使わないようにする必要があります。

IE11でも動くv-for
<ul>
  <li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>

テンプレートをコンパイルする場合はInternet Explorer 11でもOK

webpack + vue-loader の場合、*.vue ファイル中のテンプレートをビルド時に JavaScript に変換するので、バンドルされた .js を Babel でES5にトランスパイルすればIE11でも問題なく動作しました。

まとめ

  • Vue.js の v-for ディレクティブでも分割代入構文は使える
    • 公式ドキュメントに記載がないので使用は自己責任で
    • CDN版Vue.js & Internet Explorer 11の組み合わせでは正常に動作しないので注意
mascii
JavaScript, RaspberryPi, Arduino, ESP32の記事が多めです。大学院での専攻はグラフ理論でした。
https://mascii.hatenablog.com/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした