vue.$watch()で実行する関数を外に置くとエラーが出る

Question

import Vue from 'vue';
import axios from 'axios';
import jquery from 'jquery';

import * as Models from '../../system/typescript-angularjs-client-generated/model/models';
import * as  ViewModel from './VM';

/// <reference path="../typings/index.d.ts" />

/// <reference path="../typings/globals/jquery/index.d.ts" />

Vue.use(VueObserveVisibility)

export class Main_Contents {

    private ViewModel: ViewModel.VM

    private version: string
    private hash: string

    constructor(versionStr: string, hash: string) {

        this.ViewModel = new ViewModel.VM()

        let params = new URLSearchParams()
        params.append("version", versionStr)
        params.append("hash", hash)
        axios.post('', params)
            .then(response => {
                if (response.data.status == 0) {
                    this.getData()
                }
            })
    }

    getData(): void {

        let ViewModel = this.ViewModel

        let vue = new Vue({
            el: "#all_contents",
            data: ViewModel,
            mounted: {
             
            },
            methods: {
                
            }
        });
        
        /*--view control--*/

        vue.$watch("flag", function () {
            vue.$nextTick(function () {
                vue.data = 1
            })
        })
     }
   }
}

この形式だと
vue.$watch("flag", function () {
vue.$nextTick(function () {
vue.data = 1
})
})
の部分は正しく動作するのですが

vue.$watch("flag", func())
        
function func(){  
   vue.$nextTick(function () {
   vue.data = 1
   })
}

このような書き方をすると

Argument of type '"flag"' is not assignable to parameter of type '(this: CombinedVueInstance<Vue

と、flagの方にエラーが出てしまします...(>__<)

functionを分けたいんですがどのようにすればいいでしょうか...

Answer 1

vue.$watch("flag", func())と書くと、func()を実行した結果を渡すこととなってしまいます。

関数そのものを渡すときには、vue.$watch("flag", func)のようにかっこ無しで書きます。

Comments

[退会済みユーザー]

できました、すごいです!
ありがとうございます!
ただこれ引数を渡す場合などはどうなるんでしょうか(>___<)

[syumai]

>> 引数を渡す場合
func()に引数を渡して実行する関数を渡せばいいので、
vue.$watch("flag", () => func(params));
か、
vue.$watch("flag", function () { func(params); });
みたいな感じで大丈夫です

[退会済みユーザー]

おお！！！
ありがとうございます！！
あとで試して見ます(>____<)

[退会済みユーザー]

おお！！！
ありがとうございます！！
あとで試して見ます(>____<)

[退会済みユーザー]

できました！！！ありがとうございます！！！