vue.jsにおけるテキストの動的変更

Question

やりたいこと

ボタンクリックでテキストを動的に変更したい。

<span>{{text}}</span>
<button @click="setText('test')">追加</button>

export default {
  data: function () {
      return {
          text: '',
      }
  },
  methods: {
      setText(name){
        this.text = name;
      },
  },
}
</script>

起きていること

クリックしてもテキストは変更されず空白のままになっています。
メソッド内でログ出力で、変数内に「test」のデータが格納されていることは確認済みです。

vue.jsでどのようにテキストを動的に変更すれば良いのでしょうか？
jQueryのtext()のような処理は用意されているのでしょうか？

Comments

[rubytomato]

記載されているコードに特に問題はないように思います。動作確認しましたがボタンをクリックするとtextプロパティにtestという文字列がセットされページに反映されました。
なので、原因は環境か又は記載されていない部分のコードや設定にあるのではないかと思います。
もう少し情報を提示して頂けたら何かわかるかもしれません。

Answer 1

用意しているメソッドと呼び出しているメソッドの名前が違いますので以下のようにしてください

<button @click="setKeywordGroup('test')">追加</button>

Comments

[aiko_1122]

申し訳ありません。
こちらは質問内容のケアレスミスになります。
実際のコードは同じメソッド名になっております。

同じメソッド名にしても動的に変更されないです。

[akkman]

であれば
①コンソールでエラーが出ていないか
②setKeywordGroup自体は正常に呼び出せているか（setKeywordGroup内にalertを仕込むなど）
を確認してみてはいかがでしょうか