75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="field">
|
|
<label class="label is-large">Question</label>
|
|
<div class="control">
|
|
<input type="text" class="input is-large" v-model="question">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<a class="button is-large is-info" @click="addChoice">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-plus-square-o fa-align-left" aria-hidden="true"></i>
|
|
</span>
|
|
<span>Add choice</span>
|
|
</a>
|
|
<a class="button is-large is-primary" @click="saveQuestion">
|
|
<span class="icon is-small">
|
|
<i class="fa fa-check"></i>
|
|
</span>
|
|
<span>Save</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="label is-large" v-show="choices.length > 0">Question Choices</h2>
|
|
<div class="field has-addons" v-for="(choice, idx) in choices" v-bind:key="idx">
|
|
<div class="control choice">
|
|
<input type="text" class="input is-large" v-model="choices[idx]">
|
|
</div>
|
|
<div class="control">
|
|
<a class="button is-large">
|
|
<span class="icon is-small" @click.stop="removeChoice(choice)">
|
|
<i class="fa fa-times" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
question: '',
|
|
choices: []
|
|
}
|
|
},
|
|
methods: {
|
|
removeChoice (choice) {
|
|
const idx = this.choices.findIndex(c => c === choice)
|
|
this.choices.splice(idx, 1)
|
|
},
|
|
saveQuestion () {
|
|
this.$emit('questionComplete', {
|
|
question: this.question,
|
|
choices: this.choices.filter(c => !!c)
|
|
})
|
|
this.question = ''
|
|
this.choices = ['']
|
|
},
|
|
addChoice () {
|
|
this.choices.push('')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.choice {
|
|
width: 90%;
|
|
}
|
|
</style> |