Display various components using a dropdown selection

I am seeking guidance on how to display different components based on the selected option. I am unsure of how to write the code for displaying either component one or two. Can you provide any examples or references that may help?

<template>
  <div class="col-md-3 md-form mr-2">
    <i class="fa fa-envelope prefix grey-text"></i>
    <label class="font-weight-light mb-2">Component</label>
    <select v-model="comp" class="form-control">
      <option value="">Select your component to show</option>
      <option value="">Show component 1</option>
      <option value="SentenceSelected">Show component 2</option>
    </select>
  </div>
</template>
import SuspensionSelected from '../precautonary/mix/SuspensionSelected'
import SentenceSelected from '../precautonary/mix/SentenceSelected'

export default {
  name: "PrecautionCreate",
  components: {
    SuspensionSelected,
    SentenceSelected
  },
  data: () => ({
    selectedyear: '',
    selectedcause:'',
    comp: ''  
  })
};

view image description here

Answer №1

To implement a dynamic component, you can follow this approach:

<component :is="comp"></component>

Check out this demonstration:

SuspensionSelected = {
  template: `<div>Suspension Component</div>`
}

SentenceSelected = {
  template: `<div>Sentence Component</div>`
}

new Vue({
  el: "#app",
  name: "PrecautionCreate",
  components: {
    SuspensionSelected,
    SentenceSelected
  },
  data: () => ({
    selectedyear: '',
    selectedcause:'',
    comp: ''  
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <i class="fa fa-envelope prefix grey-text"></i>
  <label class="font-weight-light mb-2">Component</label>
  <select v-model="comp" class="form-control">
    <option value="">Select your component to display</option>
    <option value="SuspensionSelected">Suspension</option>
    <option value="SentenceSelected">Sentence</option>
  </select>

  <component :is="comp"></component>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating a Forgot/Reset password option into your #Firebase platform

In the project I'm working on, I am utilizing #AngularFire2. My goal is to incorporate a Reset / Forgot password link into the login page. Does anyone have suggestions on how to accomplish this task? I'm looking to get some insights from #AskFi ...

Filter products by price using Ajax in Shopify with Liquid code

I am looking to implement a custom product price filtering feature for my collection without relying on an app. Unlike the traditional price filter option, I want users to be able to input any combination of numbers, such as between $4 and $20 or $7 and $3 ...

How to dynamically increase vote tallies with React.js

The voting system code below is functioning well, displaying results upon page load. However, I am facing an issue where each user's vote needs to be updated whenever the Get Vote Count button is clicked. In the backend, there is a PHP code snippet ...

Switch between MMM dd yyy and dd/mm/yyyy date formats easily

I have implemented a native material-ui date picker which currently displays dates in the dd/mm/yyy format. However, I need to customize the display format to show dates like this: Jun 18 2012 12:00AM. This specific date format is essential for consistency ...

Tips for maintaining the currentPage variable in Vue when navigating through detail links

As I delve into vue.js, the code snippet below seems to be working smoothly. The concept is quite simple - when a user clicks on the detail, they are directed to another component to view more information about the user. However, what I am struggling with ...

Tips for preserving cropped images

Obtained the code for cropping images from this specific link: The code snippet provided in the crop.php file is as follows: <?php /** * Jcrop image cropping plugin for jQuery * Example cropping script * @copyright 2008-2009 Kelly Hallman * More ...

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

Automatically updating client-side values in AngularJS using setInterval()

Implementing a value calculator on the client side using AngularJS. I need to update the main value of the calculator every 5 minutes with setInterval(). This is my AngularJS code: $http({method: 'GET', url: '../assets/sources.json'} ...

"Looking to retrieve data from an array instead of an object in JavaScript? Here's how you can

There is a slight issue with my fetch method in grabbing data from this link . I am attempting to use the .map function on it but instead of functioning properly, I encounter an error that says Unhandled Rejection (TypeError): jedis.map is not a function. ...

The local authentication feature in NodeJS Passport is experiencing issues and not functioning properly

I have integrated passportjs local for authentication. However, I am facing an issue where it always redirects to the failureRedirect without displaying any error messages. The redirect also includes the original username and password, resulting in a dupli ...

Struggling to make jQuery code function properly in Wordpress, despite attempting to use noConflict

I have created a custom image grid gallery in WordPress using HTML and CSS, complete with popups and sliders. I had to code it myself because I couldn't find a suitable plugin that matched my design preferences. I have tested the functionality on my ...

Trigger the function upon displaying the modal

Within my Bootstrap project, I have set up a click event to trigger a modal as follows: $('#make_selects_modal').appendTo("body").modal('show'); My requirement is to run a function called pickClient when this modal is displayed. I att ...

Potential issue with Jhipster: loading of data could be experiencing delays

I've encountered an issue with getting my chart to display properly. I am working on creating a chart using ng2-charts, where I retrieve data from a service and then display it on the chart. The problem arises when the data is not correctly displayed ...

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

Having trouble accessing variable values within the nth-child selector in JavaScript

I am attempting to utilize the value of a variable within the element selector p:nth-child(0). Instead of hardcoding the number as 0, I want to dynamically assign the value of a variable. In this case, the variable is represented by i in a for loop. Howev ...

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

When a function inside React uses this.props, it won't trigger the corresponding function

I am currently developing a Checklist using React and MaterialUI that consists of two components. One component is responsible for managing the data, while the other component allows for editing the data. However, I have encountered an issue where the func ...

JavaScript: Creating Custom IDs for Element Generation

I've been developing a jeopardy-style web application and I have a feature where users can create multiple teams with custom names. HTML <!--Score Boards--> <div id="teamBoards"> <div id="teams"> ...

Challenge with inserting documents in Mongoose database

I have set up a schema and now I am trying to insert data into a MongoDB collection, but I keep getting an error stating that diagramModel.insert is not defined. Can anyone help me figure out what I did wrong? app.js mongoose.connect('mongodb://lo ...

Convert a JSON Object using AngularJs

Is there a method in Angular to restructure this JSON Object? I am looking to convert the JSON object from its original format: $scope.TestJson = { "filters": [ { "dataPropertyID": "VoidType", ...