1. ホーム
  2. javascript

VueJSで他のメソッドからメソッドにアクセスする

2023-10-12 22:14:07

質問

私はVueJSを使用して、十分にシンプルなリソース管理ゲーム/インターフェイスを作成しています。今のところ、私は roll 関数を12.5秒ごとに起動し、その結果を別の関数で使用したいと考えています。 しかし、現時点では、次のエラーが発生し続けます。

Uncaught TypeError: Undefined(...) のプロパティ 'roll' を読み取ることができません。

試してみました。

  • app.methods.roll(6);
  • app.methods.roll.roll(6);
  • roll.roll()
  • roll()

を作成しましたが、関数にアクセスできないようです。どなたか、これを実現する方法をご存知ですか?

methods: {

  // Push responses to inbox.
  say: function say(responseText) {
    console.log(responseText);
    var pushText = responseText;
    this.inbox.push({ text: pushText });
  },

  // Roll for events
  roll: function roll(upper) {
    var randomNumber = Math.floor(Math.random() * 6 * upper) + 1;
    console.log(randomNumber);
    return randomNumber;
  },

  // Initiates passage of time and rolls counters every 5 time units.
  count: function count() {
    function counting() {
      app.town.date += 1;
      app.gameState.roll += 0.2;

      if (app.gameState.roll === 1) {
        var result = app.methods.roll(6);
        app.gameState.roll === 0;
        return result;
      }
    }

    setInterval(counting, 2500);

    ...

    // Activates the roll at times.
  }
}

どのように解決するのですか?

<ブロッククオート

これらのメソッドは、VMインスタンス上で直接アクセスすることもできますし、ディレクティブ式で使用することもできます。すべてのメソッドは、その this のコンテキストが自動的にVueのインスタンスにバインドされます。

- Vue API ガイド methods

Vueインスタンスのメソッド内で、インスタンスの他のメソッドにアクセスするには this .

var vm = new Vue({
  ...
  methods: {
    methodA() {
      // Method A
    },
    methodB() {
      // Method B

      // Call `methodA` from inside `methodB`
      this.methodA()
    },
  },
  ...
});

Vueインスタンスの外側のメソッドにアクセスするには、インスタンスを変数に代入します(例えば vm のような)変数に割り当て、メソッドを呼び出します。

vm.methodA();