Vue.jsでコンポーネントのテンプレート中で変数を宣言/代入したい

Question

Vue.component('test-table', { 
  template: `
  <table>
  <tbody>
  {{ td_count = 0 }}
  <tr v-for="ntr in 5">
    <td v-for="ntd in 5">
      <template v-if="td_count==13">Hello!World!</template>
      {{ td_count = td_count + 1 }}
    </td>
  </tr>
  </tbody>
  </table>
  `
})

14番目のtd要素のときだけHello!World!と出力するような処理をやろうと思い、
二重ループの総ループ回数を保存するためのtd_count変数を宣言したのですが、代入するたびにtd_countの内容までレンダリングされて変なことになってしまいます。

今は<template v-if="hoge = 0"></template>みたいに空を出力するif構文中に変数を宣言してるのですが、
もうちょっと良い方法はないものでしょうか？

Vue.jsのバージョンは2.3.4です。

Answer 1

イベントに紐付けずメソッドを指定すればその場で実行されるので、
下記のようなコードで this の中に変数を操作できるかと思います。

{{methodName(foo)}}

  methods: {
    methodName: function(foo) {
      this.foo = foo;
    }
  }

Answer 2

vueで変数に代入して使うというのはバッドプラクティスな気がします。
そのため、今回のことを実現する方法を回答しますが、質問の代入したいという回答にはなりませんのでご了承ください

v-forは第２引数にindex値を使えます
https://jp.vuejs.org/v2/guide/list.html#基本的な使い方

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

それをうまいこと利用すると

  <tr v-for="(ntr, trIndex) in 5">
    <td v-for="(ntd, tdIndex) in 5">
      <template v-if="(trIndex * 5 + tdIndex)==13">Hello!World!</template>
    </td>
  </tr>

というコードで実現できるかと思います。

Comments

[opoonabst]

うーん、Vueだとやっぱりそうなりますよね
こちら、この方法で実装させていただきました。ありがとうございました。