@Fran-Diox Thanks. Yeah I read that one way binding. That’s why I used the events. I checked the v-model and it is not working and removed it on the question component. Thanks for that. Can you suggest me the correct way of clearing that radio button. As for now I’ m accessing the new method in the questionOption component
methods: {
clear() {
this.chosenAnswer = '';
}
}
I have this three components - main, question, and question option. What I want is to clear the checked radio button on the questionOption from the main component startNewGame method. When I’m only using the Main component resetting the radio button is just simple. I just assign the model to an empty array. Can someone help me on this? By the way, I’m using onsen UI for the customize tags and removed some unnecessary methods and data. Here is my code.
Main.vue
<div class="quiz-background">
<question
v-for="(question, $indexParent) in randomQuestions"
:question="question['doc'].question"
:choices="question['doc']['choices']"
:indexParent="$indexParent"
:correctAnswer="question['doc'].correctAnswer"
@collectedAnswer="pushToAnswers"
>
</question>
<section style="margin:16px">
<v-ons-button
modifier="cta"
@click="submit"
v-show="!isDone"
>Submit
</v-ons-button>
</section>
</div>
<script>
export default {
data() {
return {
dialogVisible: false,
resultDialogVisible: false,
questionnaires: [],
chosenAnswers: [],
correct: [],
total: 0,
isDone: false
}
},
methods: {
pushToAnswers(answer) {
this.chosenAnswers.push(answer);
},
submit() {
//will compare chosenAnswers to correct answer
}
},
startNewGame() {
//will reset answered questions
this.getQuestionaire();
this.chosenAnswers = [];
this.resultDialogVisible = false;
this.total = 0;
this.isDone = false;
},
components: {
Question
}
}
</script>
Question.vue
<question-option
v-for="(choice, key, $index) in choices"
:choice="choice"
:indexParent="indexParent"
:index="$index"
:letter="key"
:name="'question-' + indexParent"
v-model="selectedValue"
@change="changeValue"
>
</question-option>
<script>
import QuestionOption from './QuestionOption.vue';
export default {
data() {
return {
selectedValue: ''
}
},
props: ['question', 'indexParent', 'choices', 'chosenAnswer'],
methods: {
changeValue(newValue) {
this.selectedValue = newValue;
this.$emit('collectedAnswer', this.selectedValue);
}
},
components: {
QuestionOption
}
}
</script>
Question.vue
<v-ons-list-item
:modifier="longdivider"
:key="letter"
tappable
>
<label class="left">
<v-ons-radio
:name="name"
:input-id="indexParent + '-' + index"
v-model="chosenAnswer"
>
</v-ons-radio>
</label>
<label
class="center"
:for="indexParent + '-' + index"
>
{{ letter }} . {{ choice }}
</label>
</v-ons-list-item>
<script>
export default {
props: ['choice', 'indexParent', 'index', 'name', 'letter'],
computed: {
chosenAnswer: {
get() {
return this.letter;
},
set() {
this.$emit('change', this.letter);
}
}
}
}
</script>I have this 3 components. One is for the Question component that consists of questions. The second is for QuestionOption for the list of choices. And the third one is my main component. How do I get the data from the QuestionOption component to the main component. Since the main component is not the parent of the QuestionOption I cannot use the $emit. Also I make use of bus but it’s not working on my case. Can anyone help me on this.
Also how will I get all the chosen answers after the submission of the button? Here is my code.
Main.vue
<div class="quiz-background">
<question
v-for="(question, $indexParent) in randomQuestions"
:question="question['doc'].question"
:choices="question['doc']['choices']"
:indexParent="$indexParent"
:correctAnswer="question['doc'].correctAnswer"
>
</question>
<section style="margin:16px">
<v-ons-button
modifier="cta"
@click="submit"
v-show="!isDone"
>Submit
</v-ons-button>
</section>
</div>
Question.vue
<template>
<v-ons-list>
<v-ons-list-header>
{{indexParent + 1}}.{{ question }}
</v-ons-list-header>
<question-option
v-for="(choice, key, $index) in choices"
:choice="choice"
:letter="key"
:indexParent="indexParent"
:index="$index"
:correctAnswer="correctAnswer"
>
</question-option>
</v-ons-list>
</template>
<script>
import QuestionOption from './QuestionOption.vue';
export default {
props: ['question', 'indexParent', 'choices', 'correctAnswer'],
components: {
QuestionOption
}
}
</script>
QuestionOption.vue
<template>
<v-ons-list modifier="inset">
<v-ons-list-item
:name="'question-' + indexParent"
:modifier="longdivider"
:key="letter"
tappable
>
<label class="left">
<v-ons-radio
:name="'question-' + indexParent"
:input-id="indexParent + '-' + index"
:value="letter"
:key="letter"
v-model="chosenAnswer"
>
</v-ons-radio>
</label>
<label
class="center"
:for="indexParent + '-' + index"
:class="{'success' : isSuccess, 'danger' : isDanger}"
>
{{ letter }} . {{ choice }}
</label>
</v-ons-list-item>
</v-ons-list>
</template>
<script>
import Vue from 'vue';
var bus = new Vue();
export default {
data() {
return {
chosenAnswer: ''
}
},
props: ['letter', 'choice','correctAnswer', 'indexParent', 'index'],
computed: {
isSuccess () {
return this.chosenAnswer === this.correctAnswer;
},
isDanger () {
return this.chosenAnswer !== this.correctAnswer;
}
},
}
</script>@Fran-Diox Thanks for the response. I want to achieve this https://ibb.co/m5wiba. What I did was upon clicking the submit button all the answers are being checked using the submit method. How will I bind now the class on the v-ons-list. Can you please help me how to achieve this.
Hello there. I am implementing a list of questions with radio buttons as the choices for the answers. What I want to do is to bind a class or style (e.g border: solid; borderColor: green) for the border of the chosen answer, if it is correct or wrong.
Here is my code.
<v-ons-list v-for="(questionnaire, $indexParent) in questionnaires">
<v-ons-list-header>
{{$indexParent + 1}}.{{ questionnaire['doc'].question }}
</v-ons-list-header>
<v-ons-list modifier="inset">
<v-ons-list-item
modifier="longdivider"
:name="'question-' + $indexParent"
v-for="(choice, key, $index) in questionnaire['doc']['choices']"
:key="key"
tappable
>
<label class="left">
<v-ons-radio
:input-id="$indexParent + '-' + $index"
:value="key"
v-model="chosenAnswers[$indexParent]"
>
</v-ons-radio>
</label>
<label class="center" :for="$indexParent + '-' + $index">
{{key}}.{{choice}}
</label>
</v-ons-list-item>
</v-ons-list>
</v-ons-list>
<section style="margin:16px">
<v-ons-button modifier="cta" @click="submit">Submit</v-ons-button>
</section>
data() {
return {
questionnaires: [],
chosenAnswers: [],
correct: []
}
}
methods: {
submit() {
var total = 0;
for(var i = 0; i < this.questionnaires.length; i++) {
if(this.chosenAnswers[i] == this.questionnaires[i]['doc'].correctAnswer) {
total += 1;
}
}
}
}
@Fran-Diox oops sorry the attachment has no s should be _attachments it’s working now thanks. It worked when I wrapped with div class=“content” .
No they are obtained using promises.
<template>
<v-ons-page>
<div class="content">
<div class="center" v-for="note in notes">
appear here
<span>{{ note['doc']._attachment['file'].digest }} File here</span>
</div>
</div>
<v-ons-fab
tappable
position="bottom right"
:style="{ backgroundColor: $ons.platform.isIOS() }"
:visible="fabVisible"
@click="dialogVisible = true"
>
<v-ons-icon icon="md-plus"></v-ons-icon>
</v-ons-fab>
</v-ons-page>
</template>I have this array of objects but it seems I cannot display the value using the v-for on div. . Below is my code and the image for the value of the object.
<div class="center" v-for="note in notes">
<span>{{ note['doc']._attachment['file'].digest }} File here</span>
</div>
Can someone help me on how to upload a file on pouchdb and display those uploaded files on page. I want to upload a file including name info of that file. When I check the fetch files using the console I can see [object object]. Am I doing the right thing? Any advice is well appreciated. Here is my code.
//Notes.vue
// By the way Im using onsen ui for this
<template>
<v-ons-page>
<v-ons-list>
<v-ons-list-header>Auditing</v-ons-list-header>
<v-ons-list-item v-for="note in notes">
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<span>{{ note._attachment['files'].data }} File here</span>
</div>
</v-ons-list-item>
</v-ons-list>
// Customize form for uploading file and info
<v-ons-alert-dialog
modifier="rowfooter"
:visible.sync="dialogVisible"
>
<span slot="title">Create a Note</span>
//File name of the file
<v-ons-input float
placeholder="Name of note"
v-model="name"
>
</v-ons-input>
// File
<v-ons-input type="file" @change="onFileChange"></v-ons-input>
<v-ons-button @click="addNotes(name)">Submit</v-ons-button>
</v-ons-alert-dialog>
</v-ons-page>
</template>
//Here the methods for uploading and reading file uploaded
<script>
import PouchDB from 'pouchdb'
var db = new PouchDB('reviewerdb')
export default {
data() {
return {
dialogVisible: false,
notes: [],
file: '',
name: '',
path
}
},
mounted() {
this.getNotes();
print('notes: ' + this.notes);
},
methods: {
onFileChange(event) {
this.file = event.target.files[0];
},
addNotes() {
db.put({
_id: 'notes',
_attachments: {
"file": {
type: this.file.type,
data: this.file
}
}
})
},
getNotes() {
db.get('notes', {attachments:true}).then(function (note) {
this.notes = note;
});
}
}
}
</script>