vue.js passing prop through script

Question

So I’m passing a component as a variable through the store e.g.

<template>
    <div>
        <component :is="store.state.General.body"></component>
    </div>
</template>

<script>
    import store from "@/store"
</script>

Now I was wondering how I would pass the component with props because this is how I’m doing it:

<script>
    import Input from "@/components/Input"

    methods: {
        example() {
            store.commit("general_set_modal", {body: Input, title: "New "+page})
    }
</script>

it’s being rendered properly, but just lacks the desired props.

Maybe dynamic props is what you're looking for? (Look for "pass all the properties") — Roy J
– Roy J, Commented Feb 14, 2018 at 23:31
@RoyJ Not quite, since I can't exactly use html tags inside the script area. I would probably have to assign it like var input = Input then have input assign the props like input.prop.example = "this is an example prop" — A. L
– A. L, Commented Feb 15, 2018 at 0:06
You would make the binding in the template area: <component :is="store..." v-bind="somePropsObjectYouBuilt"> — Roy J
– Roy J, Commented Feb 15, 2018 at 0:52
@RoyJ The purpose of that component is just to display the component passed in. It's a modal, so I want to be able to throw anything into there and separate the dependencies. — A. L
– A. L, Commented Feb 15, 2018 at 1:57
In your example above, what would be the prop(s) you want passed in? — Roy J
– Roy J, Commented Feb 15, 2018 at 2:01

Roy J · Accepted Answer · 2018-02-15 02:07:03Z

1

I'd do something like

<template>
    <div>
        <component :is="store.state.General.body" v-bind="store.state.General.props"></component>
    </div>
</template>

<script>
    import store from "@/store"
</script>

and have the store item look like

<script>
    import Input from "@/components/Input"

    methods: {
        example() {
            store.commit("general_set_modal", {body: Input, props: {title: "New "+page}})
    }
</script>

answered Feb 15, 2018 at 2:07

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

A. L Over a year ago

Ah, I must have misunderstood you before. yeah this works great.

A. L Over a year ago

Although I seem to be getting a warning

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

even though I'm only calling it as a read.

Roy J Over a year ago

I don't have any idea what that's about. There's no watcher in the code samples you included.

A. L Over a year ago

Yeah I don't have watchers implemented either, which is why it's weird. Well the one watch that I have is in a completely unrelated file :\ I am accessing the variable through the prop

Roy J Over a year ago

Vuex maintains a deep watch in strict mode to catch inadvertent mutations. Maybe that's going on.

|

Collectives™ on Stack Overflow

vue.js passing prop through script

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related