CODEWITHSUNDEEP
javascriptvue.jsvuejs2
A. L
A. L

Reputation: 12669

vuejs - saving component to variable

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>

Upvotes: 3

Views: 5718

Answers (1)

A. L
A. L

Reputation: 12669

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"

Upvotes: 2

Related Questions