Question: how to use the Options? (add a Prop to a component)

[lorico]

Hello,
First of all, well done this package is really amazing and soooo powerful combined with gopherjs. I love it.
However, I don't manage to understand how I could add a PROPS to a given component ?
I created a dummy component package that I import from my main package.
Then creating it like

func main() {
    // Create components (and NAME them)
    vue.NewComponent(dummy.New, dummy.Template).Register("dummy")
     vm := vue.New("body", new(dummy.Controller))
js.Global.Set("vm",` vm)
}

I would like to add a prop to my dummy component, template would be like
<dummy msg="hello from outside world"></dummy>

Looks like I can create an option object such as:

    o := vue.NewOption()
    o.AddProp("msg")

=> Then how do I attach this *vue.Option, to this specific component created above ?
Or do I am going totally wrong here ?

Thanks in advance for the tip...

[lorico]

Ok I figured out how to do it:
I had to create a custom function into the "component.go" file:

// NewComponentWithProps creates and registers a named global Component, and receive a []string of props in third parameter
//
//  vmCreator should return a gopherjs struct pointer. see New for more details
func NewComponentWithProps(
    vmCreator func() (structPtr interface{}),
    templateStr string,
    p []string,                        // <--- adding a props parameter here
    replaceMountPoint ...bool,
) *Component {
    // args
    idx := len(creatorPool)
    creatorPool = append(creatorPool, new(pool))
    creatorPool[idx].creator = vmCreator
    vmfn := func() interface{} {
        p := creatorPool[idx]
        if p.counter%3 == 0 {
            p.structPtr = p.creator()
        }
        p.counter += 1
        return p.structPtr
    }
    replace := true
    if len(replaceMountPoint) > 0 {
        replace = replaceMountPoint[0]
    }
    // opts
    opt := NewOption()
        // <--- adding the props with the rest of the options below
    for _, e := range p {
        opt.AddProp(e)
    }
    opt.Data = vmfn
    opt.Template = templateStr
    opt.Replace = replace
    opt.OnLifeCycleEvent(VmInit, func(vm *ViewModel) {
        vm.Options.Set("methods", js.MakeWrapper(vmfn()))
        vMap[vmfn()] = vm
    })
    return opt.NewComponent()
}

And in the main, for the component creation:
vue.NewComponentWithProps(dummy.New, dummy.Template, []string{"msg"}).Register("dummy")

=> Now the HTML tag receives the props data correctly (in var msg):
<dummy msg="hello from outside world"></dummy>

---

However, note that all other solutions I tried didn't work (I realized a strange behavious trying with the following codes)
if doing:

    o := vue.NewOption()
    o.SetDataWithMethods(dummy.New())   // <--- notice the () after the 'New' function
    o.AddProp("msg")
    o.Template = dummy.Template
    o.NewComponent().Register("dummy")

=> I get the props in my underlying component, the events as well, but NOT the binded model data (???)

Or when doing:

    o := vue.NewOption()
    o.SetDataWithMethods(dummy.New)   // <--- notice that I don't have anymore the () after the 'New' function
    o.AddProp("msg")
    o.Template = dummy.Template
    o.NewComponent().Register("dummy")

=> I get the props in my underlying component, the binded model data are OK, but NOT the events anymore (???)

This might help somebody else struggling with it....

[oskca]

Well, sorry for the late reply.
The component is not well tested yet. And the vue.NewComponent works only for the simplest cases, if you want to more complicated components you would use vue.Option instead as you show in your code 😄

the vue.Option has an method AddProp, use this one to add your props and then use Option.NewComponent to create component, follows Componet.Register to register it globally.