gopherJs-vueでコンポネントをつかう

gopherJs-vueでコンポネントを活用刷る場合、NewComponentをつかいます

実際のところ

<!DOCTYPE html>
<html>

<body>
    <div id="app">
	<my-el></my-el>
    </div>


    <script type="text/javascript" src="basic.js"></script>
</body>

</html>

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
	Result        string `js:"result"`
    Picked       string `js:"picked"`
}


func New() interface{} {
    //コンポネントを生成する
    m := &Model{
		Object: js.Global.Get("Object").New(),
    }
    
	m.Result = "as string"
    m.Picked = "One"
    return m
}

type controller struct {
    //テンプレートをつかうので、
    //初期化時は空っぽの構造体をおく。
	*js.Object
}

func main() {
	vue.NewComponent(New, template).Register("my-el")
	vm := vue.New("#app", new(controller))
	js.Global.Set("vm", vm)
}

const (
	template = `
<div>
    <input v-model="result"  />
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <div>
	<span>Picked: {{ picked }}</span>
        <div>Result:{{result}}</div>
    </div>
</div>
`
)