Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. jayGorio
    J
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    jayGorio

    @jayGorio

    0
    Reputation
    10
    Posts
    764
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    jayGorio Follow

    Posts made by jayGorio

    • RE: Cannot clear radio button

      @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 = '';
            }
      }
      
      posted in Onsen UI
      J
      jayGorio
    • Cannot clear radio button

      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>
      posted in Onsen UI
      J
      jayGorio
    • RE: How to get data from a nested component

      @Fran-Diox thanks for your answer.

      posted in Onsen UI
      J
      jayGorio
    • How to get data from a nested component

      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>
      posted in Onsen UI
      J
      jayGorio
    • RE: Bind a class on list item

      @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.

      posted in Onsen UI
      J
      jayGorio
    • Bind a class on list item

      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;
      
      				}
      			}
      
      		}
      	}
      
      posted in Onsen UI
      J
      jayGorio
    • RE: Cannot display value when using v-for

      @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” .

      posted in Onsen UI
      J
      jayGorio
    • RE: Cannot display value when using v-for

      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>
      posted in Onsen UI
      J
      jayGorio
    • Cannot display value when using v-for

      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>
      

      0_1501829456942_object.PNG

      posted in Onsen UI
      J
      jayGorio
    • How to save and retrieve file using pouchdb and vue js on onsen ui

      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>

      posted in Developer Corner
      J
      jayGorio