Toggle (Show/Hide) HTML Element via Go and Vue.js

Write only Go code to toggle (Show/Hide) HTML DOM element via Vue.js. We need gopherjs-vue package, which is Vue.js bindings for GopherJS, to help us. The example here is the same as my previous post named [Vue.js] Toggle (Show/Hide) HTML Element [1] except that the JavaScript code is replaced with Go code. Please see the demo, JavaScript code, and explanation in my previous post first.

HTML

<div id="app">
  <div v-on:click="isShow = !isShow">
    click me to toggle (show/hide) HTML element
  </div>
  <div v-show="isShow">I am element being toggled</div>
</div>

package main

import (
      "github.com/gopherjs/gopherjs/js"
      "github.com/oskca/gopherjs-vue"
)

type Model struct {
      *js.Object      // this is needed for bidirectional data bindings
      IsShow     bool `js:"isShow"`
}

func main() {
      m := &Model{
              Object: js.Global.Get("Object").New(),
      }
      // field assignment is required in this way to make data passing works
      m.IsShow = false
      // create the VueJS viewModel using a struct pointer
      vue.New("#app", m)
}

The full code example can be found on my GitHub.

References:

[1]	[Vue.js] Toggle (Show/Hide) HTML Element