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.


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


package main

import (

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.


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