Watch Data Change With Options via Go and Vue.js

In my previous post [1], we showed how to watch data changes using Go/GopherJS/gopherjs-vue. But sometimes we need to run watchers with option. For example, we may want to run watchers immediately after initialization, and default behavior does not run waters on initialization. In this case, we need to set options as well when waters are set.

The code to set options is basically the same as the code of my previous post, except an object representing options is declared and passed as argument while setting the watchers.

The following patch shows the code difference that adding {immediate: true} option to the watcher, which means running the watchers immediately after initialization.

--- 031-watch-data-change-gopherjs-vue/app.go 2018-05-04 09:09:28.674070365 +0800
+++ 032-watch-data-change-with-option-gopherjs-vue/app.go     2018-05-07 22:37:18.242253159 +0800
@@ -24,8 +24,10 @@
      // create the VueJS viewModel using a struct pointer
      app := vue.New("#vueapp", m)

+     option := js.Global.Get("Object").New()
+     option.Set("immediate", true)
      app.Call("$watch", "userinput", func(newVal, oldVal string) {
              m.OldValue = oldVal
              m.NewValue = newVal
-     })
+     }, option)
 }

The full code example is available on my GitHub repo.

For other example and demo of using watchers with option using gopherjs-vue, see online Sieve of Eratosthenes [2].

Tested on:

• Chromium 65.0.3325.181 on Ubuntu 17.10 (64-bit)
• Go 1.10.2
• GopherJS 1.10-3

References: