Skip to content

Can't find a elegant way to define a multi instanciated component #10

@lpuigo

Description

@lpuigo

Hi Oskca,

First of all, many thanks for this very nice and convenient GopherJS extension on VueJS.

I'm struggling with proper Component definition in order to define a component wich can be instanciated many time within a html page

I've finally wrote this working code :

const (
	TemplateCounter = `
	<div class="ui labeled button" tabindex="0" @click="Inc">
		<div class="ui button" :class="color">
			<i class="heart icon"></i> Like
		</div>
		<a class="ui basic left pointing label" :class="color">{{cnt}}</a>
	</div>
`
)

// CounterComp GopherJs Code
type CounterComp struct {
	*js.Object
	Cnt int `js:"cnt"`
}

func NewCounterComp() *CounterComp {
	cc := &CounterComp{
		Object: js.Global.Get("Object").New(),
	}
	cc.Cnt = 0
	return cc
}

func (cc *CounterComp) Inc() {
	cc.Cnt++
}


// RegisterCompteurComp registers to current vue intance a counter component having the following profile
//  <counter color="some_color_name"></counter>
func RegisterCompteurComp() *vue.Component {
	o := vue.NewOption()
	o.Template = TemplateCounter

	//o.Data = func() interface{} {
	//	return NewCounterComp()
	//}
	// which is equivalent to following
	//o.Set("data", NewCounterComp)
	// and also equivalent to following (kept because shorter)
	o.Data = NewCounterComp

	o.AddMethod("Inc", func(vm *vue.ViewModel, args []*js.Object) {
		vm.Data.Set("cnt", vm.Data.Get("cnt").Int()+1)
	})

	o.AddProp("color")

	return o.NewComponent().Register("counter")
}

This code works ok (it enables multiple counter component intances to work side to side, with a specific value in each occurence), but It does not please me :

As o.SetDataWithMethods(NewMessageComp) ( nor o.SetDataWithMethods(NewMessageComp())) does not seem to work in this case (method "Inc" is not defined on JS side), is there a way to use the actual method assocatied with the Go type, instead of having to "rewrite" the logic in a (Gopher)JS way ?

As a turn around, I used the o.AddMethod... stuff, but it is frustrating for me as it does not reuse the func (cc *CounterComp) Inc() method from CounterComp Go type.

Any hint (or even better, a more comprehensive exemple for component) would be really appreciated

Best Regards
Laurent

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions