4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vueのテンプレート内で一時変数的なのを利用したい時

Posted at

乱暴なやり方だと思っていて、他にいい方法があるか知りたい。
そもそもこういうことをやらないといけない設計に問題があるのかもしれない。

とあるテンプレート内で、自身のプロパティが保有するモデルインスタンスのメソッドをコールし、
その戻り値をテンプレート内で何度も繰り返し利用したくなった。
テンプレートを利用せず、renderメソッドを利用すれば解決できるんだけど、
テンプレートの記述量が多く、これをメソッドに落とすのはとてもしんどいし
可読性がしこたま悪くなる。
かといって、vueでは以下のようなテンプレート内での変数定義ができなさそう。

<template>
  <div v-for="item in items" :key="item.id">
    {{var hoge = model.getSomeValueByItemId(item.id)}}

    <p>{{hoge}}</p>
    <p>{{hoge * 2}}</p>
    <p>{{hoge * 3}}</p>
  </div>
</template>

そこで仕方なく、「thisのメンバとして、一時変数的に入れちゃえばいいや。dataの中に入ればければ値のプロキシも発生しないしインパクトも少なかろう、、」、と
以下のようなことをやってみた。

<template>
  <div v-for="item in items" :key="item.id">
    {{_hoge = model.getSomeValueByItemId(item.id)}}

    <p>{{_hoge}}</p>
    <p>{{_hoge * 2}}</p>
    <p>{{_hoge * 3}}</p>
  </div>
</template>

すると、代入している箇所で戻り値がそのままレンダリングされてしまった。そりゃそうだ。

で、以下のようにした。

{{(_hoge = model.getSomeValueByItemId(item.id)) && null}}

こうするとレンダリング対象の変数は必ず一番右辺のnullになる。

やっておきながら、これだとテンプレート箇所になんだかよくわからんスキーマが隠れちゃって危ない気もしていて
こういう時にrenderメソッド利用時のように、templateタグや、v-forのブロックの中だけをスコープとした変数の定義ができるようにして欲しい。
テンプレートはできるだけプログラムチックな記述をさせないぞ、というvueの思想なのかなあ。

4
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?