Условное отображение вопросов
Как @Roy J предлагает в комментариях, данные вопросов, вероятно, принадлежат родителю.Именно родитель обрабатывает все данные и решает, какие вопросы следует задавать.Однако существует множество стратегий для этого:
- Отображать вопросы условно с
v-if или v-show непосредственно в родительском шаблоне:
Возможно, логика для отображениянекоторые вопросы не являются общими.Это может зависеть от большего количества вещей, пользовательских настроек ... Я не знаю.Если это так, просто визуализируйте вопросы условно непосредственно в родительском элементе, чтобы вам не требовался доступ ко всем данным вопросов в любом вопросе.Код должен выглядеть примерно так:
<template>
<div id="app">
<div class="c-troubleshooter">
<one @changeAnswer="updateActiveQuestions" v-if="displayQuestion(1)"/>
<two @changeAnswer="updateActiveQuestions" v-if="displayQuestion(2)"/>
</div>
</div>
</template>
<script>
import one from './components/one.vue'
import two from './components/two.vue'
export default {
name: 'app',
components: {
one,
two
},
data: function() {
return {
activeQuestions: [],
}
},
methods: {
updateActiveQuestions(event) {
let index = this.activeQuestions.findIndex( ({ id }) => id === event.id );
if ( index === -1 ) {
this.activeQuestions.push(event);
} else {
this.activeQuestions[index] = event;
}
},
displayQuestion(index){
// logic...
}
},
}
</script>
Передавайте ссылку на предыдущий вопрос на каждый вопрос:
Если какой-либо вопрос должен быть виден только после того, как на предыдущий вопрос был дан ответ или просмотрен, или что-то в этом роде, вы можете передать его какПодпишите на каждый вопрос, чтобы они знали, должны ли они сделать или нет:
<template>
<div id="app">
<div class="c-troubleshooter">
<one @changeAnswer="updateActiveQuestions"/>
<two @changeAnswer="updateActiveQuestions" prev="activeQuestions[0]"/>
</div>
</div>
</template>
И в two.vue:
props: ['prev'],
computed: {
show: function() {
return this.prev && this.prev.status === 'ANSWERED';
// or some logic related to this, idk
}
},
просто передайте все данные детям:
Когда вы закодируете их, вы можете просто передать все данные вопросов в качестве опоры каждому компоненту вопроса, а затем использовать их в вычисляемом свойстве.Это не то, что я бы сделал, а просто работает, и поскольку объекты являются ссылками, это не обязательно неэффективно.
Использование универсального компонента:
Кажется странным иметь one.vue,two.vue для каждого вопроса, и, конечно, он плохо масштабируется.
Я не совсем уверен, насколько модульным я могу их сделать, поскольку шаблон для каждого вопроса может немного отличаться.Например, в некоторых есть изображения или пользовательские элементы, а в других нет.
Если шаблон действительно отличается от каждого вопроса к другому, это может усложниться.Однако, если, как я подозреваю, они имеют общую структуру HTML, с определенным заголовком или общей кнопкой «спросить» внизу и тому подобным образом, то вы сможете решить эту проблему с помощью слотов Vue .
Помимо проблем с шаблонами, я полагаю, что каждый вопрос в вашем приложении может получить произвольное количество «подвопросов» (например, two.vue с question-2-a и question-2-b).Это потребует сложной и гибкой структуры данных для данных вопросов (которая станет более сложной, когда вы начнете добавлять несколько вариантов, несколько возможных ответов и т. Д. И т. Д.).Это может быть очень сложным, но вам, вероятно, придется работать над этим, пока вы не сможете использовать один question.vue компонент, это наверняка окупится.
Совет: избегайте наблюдателей
Вы используете *От 1053 * до answer в шаблоне two.vue, затем с помощью наблюдателя для отслеживания изменений в переменной answer и отправки события.Это сложное и трудное для чтения, вы можете использовать @input или @change события для элемента <input> вместо:
<input type="radio" id="question-2-a" name="question-2" value="ja" v-model="answer" @input="emitAnswer">
И затем вместо наблюдателя есть метод:
emitAnswer() {
this.$emit('changeAnswer', {
id: this.id,
question: this.question,
answer: this.answer
})