vuejs - saving component to variable

Question

So I come from a React background and I was wondering how I could mimic this line: var modal = <Login/>

Here's what I have so far, but the output of the variable is a string instead:

<template src="./App.html"></template>

<script>
  import 'jquery'
  import 'uikit'
  import 'uikit/dist/css/uikit.min.css'

  import Login from '@/Login.vue'
  import Register from '@/Register.vue'

  export default {
    name: 'app',
    components: {
        "Login": Login,
        "Register": Register
    },
    data: function () {
        return {
            message: "first",
            modal: {
                body: "test",
                title: "body"
            }
        }
    },
    methods: {
        modal_open: function(type) {
            if (type === "login")
            {
                this.modal = {
                    body: Login,
                    title: "login"
                }
            }
            else
            {
                this.modal = {
                    body: Register,
                    title: "Register"
                }
            }
        },
    }
  }
</script>

@Bert Ah I found out how to do it. vuejs.org/v2/guide/components.html#Dynamic-Components I don't know why but I always seem to find the answer soon after I post the question. I'll answer it myself. — A. L
– A. L, Commented Oct 12, 2017 at 4:01

tony19 · Accepted Answer · 2022-07-15 02:23:54Z

2

So in Vue it's apparently called Dynamic Components https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

From the given question, you should have <component :is="modal.body"></component> in your template. And rather than assigning an object, you assign the key (string) from the components variable inside the Vue instance. E.g. modal.body = "Login"

edited Jul 15, 2022 at 2:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 12, 2017 at 4:04

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

2 Comments

Bert Over a year ago

is doesn't have to be a string. Also, an alternative to using a dynamic component would be using a render function.

A. L Over a year ago

@Bert Ah cool, could you update my answer (or make a new one, I'll mark it). You seem to be much more knowledgeable about this than me.

Collectives™ on Stack Overflow

vuejs - saving component to variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related