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

Vue.js のディレクティブの記述を膨らませないために

概要

本記事では、Vue.jsのディレクティブって便利だけどなんかかさばって可読性が・・という方に
改善する方法をv-bindを例にして紹介していきます。

元のコード

aタグに対して2つのv-bindが設定されています。
2つくらいなら・・と思うかもしれませんがこれが膨張していくと恐ろしいことになります。

index.html
<div id="app">
  <a :href="url" :id="number">リンク</a>
</div>
index.js
new Vue({
  el: '#app',
  data: {
    url: 'https://sample.com',
    number: 23
  }
})

改善

ひとつのオブジェクトにまとめることができます。
画面上の表示はなにも変わりません。

index.html
<div id="app">
  <a v-bind="{href: url, id: number}">リンク</a>
</div>
index.js
new Vue({
  el: '#app',
  data: {
    url: 'https://sample.com',
    number: 23,
  }
})

さらに改善

dataの中にオブジェクトとして持たせておいて、html上ではbindObjectとバインドさせているだけになりました。こちらも画面上の表示はなにも変わりません。
こちらの方がhtmlに記載する量が少ないのでVue.jsを書く上での理想の形です。そして管理もしやすくなりますね。

index.html
<div id="app">
  <a v-bind="bindObject">リンク</a>
</div>
index.js
new Vue({
  el: '#app',
  data: {
    bindObject: {
      url: 'https://sample.com',
      number: 23,
    }
  }
})

最後に

可読性を下げず、チームでも個人でも管理しやすい形でコーディングできるように自分ももっと気をつけていこうと思います。

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
ユーザーは見つかりませんでした