Общие компоненты в vue
Я делаю викторину на Vue.js, вопросы викторины могут быть разных типов:
- Выберите один
- Выберите несколько
- Выберите изображение
- Соответствовать
Моя проблема в том, что типы вопросов смешаны (например, вы можете использовать любой из них в викторине) и, следовательно, представляют собой разные компоненты (<x-select-one-question>, <x-select-multiple-question>, <x-select-image-question>, <x-match> и т. д.), поэтому я не могу просто добавить один компонент в викторину.
Как я могу и должен ли я сделать универсальный компонент для этого? Может быть, что-то вроде этого?
<template>
<div>
<x-question
v-for = "(question, index) in questions"
:key = "index"
type = "question.type"></x-question>
</div>
</template>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваш компонент может быть чем-то вроде этого
<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' }
]
}
}
});
При этом вы должны иметь возможность передать правильный опора, например «выбрать», «несколько» или «изображение», чтобы отобразить нужный ввод.
<div id = "app">
<question type='image'></question>
</div>
Вот рабочий пример, если вы хотите попробовать сами.
Вы можете использовать тип «компонент», а затем во время выполнения установить соответствующий компонент с атрибутом «есть» следующим образом:
<component :is = "componentToRender(type)
В функции вы проверите компонент ведьмы, который хотите вернуть, например:
componentToRender(type){
case 'quiz1': return 'QuizOneComponent';
// continue like this
}
Прошу прощения за то, что не поставил галочку на этот вопрос