Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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>
`
)

結果はこんな感じ
f:id:shuzo_kino:20170526223709p:plain

参考もと

jp.vuejs.org