Components with no specific branding in Vue

Question

Components with no specific branding in Vue

Creating a quiz in Vue.js with various question types:

Select one
Select multiple
Select image
Match

The challenge lies in the mixing of question types within the same quiz, leading to the use of different components (<x-select-one-question>,

<x-select-multiple-question>

, <x-select-image-question>, <x-match>, etc.) which prevents straightforward insertion into the quiz.

Is there a way to create a generic component for this purpose? Perhaps something along these lines:

<template>
  <div>
    <x-question 
      v-for="(question, index) in questions" 
      :key="index" 
      type="question.type"></x-question>
  </div>
</template>

javascript vue.js

Answer 1

Answer №1

To dynamically render different components at run time, you can utilize the 'component' type and set the relevant component using the 'is' attribute like so:

<component :is="componentToRender(type)

Within the function, determine which component to return based on a specified criteria, for example:

componentToRender(type){
 case 'quiz1': return 'QuizOneComponent';
// add more cases here
}

Answer 2

To dynamically render different components at run time, you can utilize the 'component' type and set the relevant component using the 'is' attribute like so:

<component :is="componentToRender(type)

Within the function, determine which component to return based on a specified criteria, for example:

componentToRender(type){
 case 'quiz1': return 'QuizOneComponent';
// add more cases here
}

Answer 3

Answer №2

You could create a component similar to this:

<template>
<select v-if="type == 'select'">
  <option v-for="item in items" :value="item.value">{{ item.text }}</option>
</select>
<select v-else-if="type == 'multiple'" multiple>
  <option v-for="item in items" :value="item.value">{{ item.text }}</option>
</select>
<input v-else-if="type == 'image'" type="file" id="image" name="image" accept="image/png, image/jpeg">
</template>

Vue.component('question', {
  template: '#question',
  props: {
    type: {
        default: ''
    },
    items: {
      type: Array,
      default: [
        { value: 1, text: 'One' },
        { value: 2, text: 'Two' },
        { value: 3, text: 'Three' }
      ]
    }
  }
});

By passing the correct prop like 'select', 'multiple', or 'image', you can display the desired input field.

<div id="app">
  <question type='image'></question>
</div>

If you'd like to experiment with it, check out this JSFiddle link.

Answer 4

You could create a component similar to this:

<template>
<select v-if="type == 'select'">
  <option v-for="item in items" :value="item.value">{{ item.text }}</option>
</select>
<select v-else-if="type == 'multiple'" multiple>
  <option v-for="item in items" :value="item.value">{{ item.text }}</option>
</select>
<input v-else-if="type == 'image'" type="file" id="image" name="image" accept="image/png, image/jpeg">
</template>

Vue.component('question', {
  template: '#question',
  props: {
    type: {
        default: ''
    },
    items: {
      type: Array,
      default: [
        { value: 1, text: 'One' },
        { value: 2, text: 'Two' },
        { value: 3, text: 'Three' }
      ]
    }
  }
});

By passing the correct prop like 'select', 'multiple', or 'image', you can display the desired input field.

<div id="app">
  <question type='image'></question>
</div>

If you'd like to experiment with it, check out this JSFiddle link.

Components with no specific branding in Vue

Answer №1

Answer №2

Similar questions

Turn off the checkboxes

Vue.js Element UI dialog box

Ways to display the result in a new tab

Discovering the frequency of a specific key in a JSON object or array using JavaScript

Steps to Perform ajax Request when the Scroller Reaches the Bottom

Is the malfunction due to jQuery 1.3.2, or is there another underlying issue causing it to not work properly

The present user who is currently logged into the stackmob platform

Challenges arise when attempting to integrate the jquery plugin (jlembed) due to conflicts with namespaces

Guide on how to compile template strings during the build process with Babel, without using Webpack

Pairing arrays to their corresponding strings

How can I access attribute type information in a Node.js Sequelize model?

FancyBox: Can You Achieve the Same Scrolling Effect with HTML Fragments Instead of Images?

Warning happens two times upon performing a right-click

NEXT JS - Application renders twice due to rewrites in place

Is there a jQuery function similar to toggle that accepts a boolean parameter?

Can a file be imported into Node.js without the need for packaging?

The child module invokes a function within the parent module and retrieves a result

What is the most efficient method to execute JavaScript programmatically upon loading an ASP.net page?

When the back button on the browser is clicked, ensure that the customer is returned to the same position

The functionality of changing the checkbox to "checked" by clicking on the span is not