web-dev-qa-db-ja.com

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

VueJSを使用して、シンプルで十分なリソース管理ゲーム/インターフェイスを作成しています。すぐに、12.5秒ごとにroll関数をアクティブにし、その結果を別の関数で使用したいと考えています。現時点では、次のエラーが引き続き発生します。

不明な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.
  }
}
javascriptmethodsvue.js
42
Jackanapes

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();
84
Wing

vm.methodName();を使用できます

例：

let vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    methodA: function () {
      console.log('hello');
    },
    methodB: function () {
      // calling methodA
      vm.methodA();
    }
  },
})
2
Rajkumar Rajendran
let vm = new Vue({
  el: '#testfunc',
  data:{
    sp1: "Hi I'm textbox1",
    sp2: "Hi I'm textbox2"
  },
  methods:{
    chsp1:function(){
      this.sp1 = "I'm swapped from textbox2"
    },
    chsp2:function(){
      this.sp2 = "I'm swapped from textbox1";
      this.chsp1();
    },
    swapit:function(){
      this.chsp2();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="testfunc">
  <input type="text" :value="sp1"></span>
  <input type="text" :value="sp2"></span>
  <button @click="swapit()">Swap</button>
</div>
1
SagitSri