We Keep Coding

How to change style of selected option of MCQ type question in angular Quiz app

I am not able to change style of selected option of answer from my quiz app in angular.
Below is my code .ts
selectedAnswer(queNumber: number, ans: any) {
// ************** working but all get selected at a time *******************
console.log("Question number : "+queNumber+" & selected ans : "+ans);
for(let i=0;i<this.arrQuestions[queNumber].options.length;i++){
// console.log(this.arrQuestions[queNumber].options[i]+"=> option["+i+"]")
console.log("ans => "+ans)
console.log("this.arrQuestions[queNumber].answer => "+this.arrQuestions[queNumber].answer)
if(ans == this.arrQuestions[queNumber].answer){
console.log(this.arrQuestions[queNumber].answer+" : Correct Answer")
this.answerSubmitted = true
this.correctAnswer = "correctAnswer"
break
}
}
}
Below is my code .html
<div
class="listAnswer"
*ngFor="let ans of arrQuestions[i].options; let ansIndex = index"
(click)="selectedAnswer(i,ans)"
>
<span
*ngIf="answerSubmitted; then answered; else notAnswered"
></span>
<ng-template #notAnswered>
<i class="pi pi-circle"></i>
</ng-template>
<ng-template #answered>
<span *ngIf="checkAnswer; then correct; else incorrect"></span>
<!-- <ng-template #correct>
<i class="pi pi-check-circle"></i>
</ng-template>
<ng-template #incorrect>
<i class="pi pi-times-circle"></i>
</ng-template> -->
<ng-template #correct>
<i [ngClass]="{'correctAnswer':correctAnswer}"></i>
<i class="pi pi-check-circle"></i>
</ng-template>
<ng-template #incorrect>
<i [ngClass]="wrongAnswer"></i>
</ng-template>
</ng-template>
{{ ans }}
</div>
I have tried with diff ways like giving seprate ids and classes but not getting output as expected. I am not using form in above code. and not sure about answer

Vue.js Getting erros even if component is not rendered

I have a component that only renders if there is data to show.
<v-row v-if="openPositions.length !== 0" justify="center" align="end" class="mt-1">
This works perfectly.
However, even when this component is not rendered, error messages are printed, because some data is undefined within this component, but that's why I'm not displaying the table in the first place.
How can I stop these error messages?
===== EDIT =====
Below you can see the complete component code and below that the error from the console.
<template>
<v-row v-if="openPositions.length" justify="center" align="end" class="mt-1">
<v-col sm="12">
<v-data-table
v-if="this.full"
dense
align="center"
:headers="headers_full"
:items="openPositions"
hide-default-footer
>
<template v-slot:item.symbol="{ item }">
<span>{{ item.symbol }}</span>
</template>
<template v-slot:item.size="{ item }">
<span v-if="item.side === 'sell'" class="error--text">{{
item.size
}}</span>
<span v-if="item.side === 'buy'" class="success--text">{{
item.size
}}</span>
</template>
<template v-slot:item.position_value="{ item }">
<span>
{{ item.position_value.toFixed(6) }}
</span>
</template>
<template v-slot:item.entry_price="{ item }">
<span>
{{ item.entry_price.toFixed(2) }}
</span>
</template>
<template v-slot:item.liq_price="{ item }">
<span>
{{ item.liq_price.toFixed(2) }}
</span>
</template>
<template v-slot:item.position_margin="{ item }">
<span>
{{ item.position_margin.toFixed(6) }}
</span>
</template>
<template v-slot:item.unrealised_pnl_last="{ item }">
<span v-if="item.unrealised_pnl_last < 0" class="error--text">
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
<span v-else-if="item.unrealised_pnl_last > 0" class="success--text">
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
<span v-else>
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
</template>
<template v-slot:item.realised_pnl="{ item }">
<span v-if="item.realised_pnl < 0" class="error--text">
{{ item.realised_pnl.toFixed(6) }}
</span>
<span v-else-if="item.realised_pnl > 0" class="success--text">
{{ item.realised_pnl.toFixed(6) }}
</span>
<span v-else>
{{ item.realised_pnl.toFixed(6) }}
</span>
</template>
<template v-slot:item.daily_total="{ item }">
<span v-if="item.daily_total < 0" class="error--text">
{{ item.daily_total.toFixed(6) }}
</span>
<span v-else-if="item.daily_total > 0" class="success--text">
{{ item.daily_total.toFixed(6) }}
</span>
<span v-else>
{{ item.daily_total.toFixed(6) }}
</span>
</template>
<template v-slot:item.market_close="{ item }">
<v-btn x-small color="primary" #click="marketClose(item)">
Close
</v-btn>
</template>
</v-data-table>
<v-data-table
v-else
dense
align="center"
:headers="headers_reduced"
:items="openPositions"
hide-default-footer
>
<template v-slot:item.symbol="{ item }">
<span>{{ item.symbol }}</span>
</template>
<template v-slot:item.size="{ item }">
<span v-if="item.side === 'sell'" class="error--text">{{
item.size
}}</span>
<span v-if="item.side === 'buy'" class="success--text">{{
item.size
}}</span>
</template>
<template v-slot:item.position_value="{ item }">
<span>
{{ item.position_value.toFixed(6) }}
</span>
</template>
<template v-slot:item.entry_price="{ item }">
<span>
{{ item.entry_price.toFixed(2) }}
</span>
</template>
<template v-slot:item.liq_price="{ item }">
<span>
{{ item.liq_price.toFixed(2) }}
</span>
</template>
<template v-slot:item.position_margin="{ item }">
<span>
{{ item.position_margin.toFixed(6) }}
</span>
</template>
<template v-slot:item.unrealised_pnl_last="{ item }">
<span v-if="item.unrealised_pnl_last < 0" class="error--text">
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
<span v-else-if="item.unrealised_pnl_last > 0" class="success--text">
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
<span v-else>
{{ item.unrealised_pnl_last.toFixed(6) }}
</span>
</template>
<template v-slot:item.realised_pnl="{ item }">
<span v-if="item.realised_pnl < 0" class="error--text">
{{ item.realised_pnl.toFixed(6) }}
</span>
<span v-else-if="item.realised_pnl > 0" class="success--text">
{{ item.realised_pnl.toFixed(6) }}
</span>
<span v-else>
{{ item.realised_pnl.toFixed(6) }}
</span>
</template>
<template v-slot:item.daily_total="{ item }">
<span v-if="item.daily_total < 0" class="error--text">
{{ item.daily_total.toFixed(6) }}
</span>
<span v-else-if="item.daily_total > 0" class="success--text">
{{ item.daily_total.toFixed(6) }}
</span>
<span v-else>
{{ item.daily_total.toFixed(6) }}
</span>
</template>
<template v-slot:item.market_close="{ item }">
<v-btn x-small color="primary" #click="marketClose(item)">
Close
</v-btn>
</template>
</v-data-table>
</v-col>
</v-row>
</template>
<script>
import store from "../store";
export default {
store,
name: "OpenPositions",
components: {},
props: [],
data() {
return {
dialog: false,
headers_full: [
{ text: "Open Position", value: "symbol" },
{ text: "Qty", value: "size" },
{ text: "Value", value: "position_value" },
{ text: "Price", value: "entry_price" },
{ text: "Liq. Price", value: "liq_price" },
{ text: "Margin", value: "position_margin" },
{ text: "Leverage", value: "leverage" },
{
text: "Unrealized P&L",
value: "unrealised_pnl_last",
},
{ text: "Daily Realized P&L", value: "realised_pnl" },
{ text: "Daily Total (% of Account)", value: "daily_total" },
{ text: "SL", value: "stop_loss" },
{ text: "TP", value: "take_profit" },
{ text: "TS", value: "trailing_stop" },
{ text: "Stops", value: "trading_stops" },
{ text: "Market close", value: "market_close" },
],
headers_reduced: [
{ text: "Open Position", value: "symbol" },
{ text: "Qty", value: "size" },
{ text: "Value", value: "position_value" },
{ text: "Price", value: "entry_price" },
{ text: "Liq. Price", value: "liq_price" },
{ text: "Margin", value: "position_margin" },
{ text: "Leverage", value: "leverage" },
{
text: "Unrealized P&L",
value: "unrealised_pnl_last",
},
{ text: "Daily Realized P&L", value: "realised_pnl" },
{ text: "Daily Total (% of Account)", value: "daily_total" },
{ text: "Market close", value: "market_close" },
],
};
},
methods: {
async marketClose(item) {
await this.$apiAbstraction.marketOrder(
item.symbol,
item.side === "buy" ? "sell" : "buy",
Math.abs(item.size)
);
},
},
computed: {
openPositions() {
return store.getters.getOpenPositionsByExchange(
store.getters.getExchange
);
},
full() {
return store.getters.getExchange !== "deribit";
},
},
mounted() {},
};
</script>
<style scoped></style>
The error:
[Vue warn]: Error in render: "TypeError: item.position_value.toFixed is not a function"
found in
---> <VData>
<VDataTable>
<OpenPositions> at src/components/OpenPositions.vue
<Ladder> at src/views/Ladder.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3550
updateComponent # vue.runtime.esm.js?2b0e:4066
get # vue.runtime.esm.js?2b0e:4479
run # vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4310
eval # vue.runtime.esm.js?2b0e:1980
flushCallbacks # vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1933
nextTick # vue.runtime.esm.js?2b0e:1990
queueWatcher # vue.runtime.esm.js?2b0e:4402
update # vue.runtime.esm.js?2b0e:4544
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
setOpenPositions # exchanges.js?d86e:169
wrappedMutationHandler # vuex.esm.js?2f62:840
commitIterator # vuex.esm.js?2f62:462
eval # vuex.esm.js?2f62:461
_withCommit # vuex.esm.js?2f62:620
commit # vuex.esm.js?2f62:460
boundCommit # vuex.esm.js?2f62:405
handleOnMessage # deribitApi.js?89c3:141
_this.ws.onmessage # deribitApi.js?89c3:59
ReconnectingWebSocket._handleMessage # reconnecting-websocket-mjs.js?d096:172
vue.runtime.esm.js?2b0e:1888 TypeError: item.position_value.toFixed is not a function
at fn (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"7c63af54-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/OpenPositions.vue?vue&type=template&id=3ad75d40&scoped=true& (app.js:1010), <anonymous>:279:64)
at normalized (vue.runtime.esm.js?2b0e:2590)
at eval (Row.ts?6e51:31)
at Array.map (<anonymous>)
at render (Row.ts?6e51:22)
at createFunctionalComponent (vue.runtime.esm.js?2b0e:3058)
at createComponent (vue.runtime.esm.js?2b0e:3231)
at _createElement (vue.runtime.esm.js?2b0e:3434)
at createElement (vue.runtime.esm.js?2b0e:3353)
at VueComponent.vm.$createElement (vue.runtime.esm.js?2b0e:3494)

Edit (after seeing the actual error):
The problem is you're trying to use .toFixed on something that is not a number. To guard against it, you have to wrap the value in Number.
Number(item.daily_total || 0).toFixed(6)
Also, your item.daily-total template slot can be significantly simplified as:
<template v-slot:item.daily_total="{ value }">
<span :class="{ 'error--text': value < 0, 'success--text': value > 0 }"
v-text="Number(value || 0).toFixed(6)" />
</template>
Obviously, you should use a similar approach to the other templates as well.
Because you use it in more than one place, you could DRY your code up and use a Vue component to apply the success/error classes:
<template>
<span :class="cellClass"
v-text="Number(value || 0).toFixed(toFixed || 2)" />
</template>
<script>
export default Vue.extend({
name: 'CellValue',
props: ['value', 'item', 'header', 'toFixed'],
computed: {
cellClass() {
return {
'error--text': this.value < 0,
'success--text': this.value > 0
}
}
}
})
</script>
...import it as a Vue component and use it in your table templates as:
<template v-slot:item.daily_total="cell">
<cell-value v-bind="cell" :to-fixed="6" />
</template>
You don't need to declare item or header as props, but they're provided by the Vuetify slot, in case you need them.
Note I also added an extra prop called to-fixed, defaulting to 2 which determines the number of decimals. You could rename it decimals.
Also note I default the value to 0 to avoid any errors around using .toFixed() on anything that's not of type number.
If, for example, you prefer to display a custom text when the value is of any other type than number, you could use something more elaborate in CellValue's template:
<template>
<span :class="cellClass">
<template v-if="typeof value === 'number'">
{{ value.toFixed(toFixed || 2) }}
</template>
<template v-else>
<code>{{ value || '--' }}</code>
</template>
</span>
</template>
For reference, I'm leaving here the initial answer, as it might help others:
Whenever your template depends on an expression which errors in some cases because it tries to access properties/methods of undefined entities, the easiest workaround is to create a computed property which avoids the exception:
<template>:
<v-row v-if="hasOpenPositions" justify="center" align="end" class="mt-1">
<script>:
computed: {
hasOpenPositions() {
return this.openPositions && this.openPositions.length !== 0;
}
}
However, be warned the above computed will return true when openPositions is truthy and it doesn't have a length property (when its length is undefined; i.e.: openPositions: {} - because undefined !== 0).
Another slightly shorter syntax I find myself using is:
computed: {
hasOpenPositions() {
return !!(this.openPositions?.length);
}
}
(This one only returns true when openPositions has a truthy length, which is probably what you want).
Do note optional chaining (?.) does not work in <template>, at least for now.
The above is a general workaround which comes in handy with deep objects, so your template doesn't error when the objects have not yet been populated/loaded.
However, if openPositions is an array, you should just instantiate it as an empty array and simplify your check as:
<template>:
<v-row v-if="openPositions.length" justify="center" align="end" class="mt-1">
<script>:
data: () => ({
openPositions: []
}),
mounted() {
this.$http.get('some/api').then(r => { this.openPositions = r.data })
}
The relevant bit here is openPositions is an array at all times (so it always has a length internal method) and that it's reactive. How you update it (in mounted or some method) is irrelevant.

Display an object in Vue template

I have an object like:
Obj = {
'min_mix': 1,
'max_mix': 2,
'climbing': {
'easy':[
{
'hour': 1.0,
'id':0,
}
],
'height': [
{
'hour': 1.0,
'price': 100
}
]
}
}
I have to display this in my HTML:
min_mix : 1
max_mix : 2
climbing:
easy:
hour : 1.0
id : 0
height:
hour: 1.0
price: 100
For now I use some v-for, but I don't have a good result,
I don't understand how display correctly the array in easy and height?
https://jsfiddle.net/CanadianDevGuy/fjaoztgn/15/

Please check this https://jsfiddle.net/Lewvsp0k/
<v-card-text v-for='(value,name) in obj' :key='name' class="pt-0 pb-0">
<template v-if="typeof value !== 'object'">
<b>{{name}} : {{ value }} </b>
</template>
<template v-else>
<div v-for="(rowValue, rowIndex) in value" :key='rowIndex' class="mb-2 pa-0">
<b>{{name}} : </b>
<div v-for="(rowValue1, rowIndex1) in rowValue" :key='rowIndex1' class="mb-2 pa-0">
<b>{{rowIndex1}} : </b>
<div>
<div v-for="rowValue2 in rowValue1" :key='rowValue2' class="mb-2 pa-0">
<div v-for="(rowValue3, rowIndex3) in rowValue2" :key='rowValue3' class="mb-2 pa-0">
<b> {{rowIndex3}} : {{rowValue3}} </b>
</div>
</div>
</div>
</div>
</div>
</template>
</v-card-text>

Should work
<template v-for="(item, index) in Obj ">
<template v-if="typeof item !== Object">
<div :key="index">
{{ index }} : {{ item }}
</div>
</template>
<template v-else>
<div :key="'subitem' + indexSubItem" v-for="(subItem, indexSubItem) in item">
{{ indexSubItem }} : {{ subItem }}
</div>
</template>
</template>

The easiest way is to actually create a new component, say <object-entry>, that can perform iterative nesting logic: if the value it encounters is a string or number, we print it out directly; otherwise, we nest another level of <object-entry> in it.
The <object-entry> component (you can also rename it to anything you like, that makes more sense) will do the following:
always print the key from the key-value pair.
decide if it should print the value from the key-value pair:
if value is a typeof string/number, we print it
if value is not (then it is an array or object), we then call the component itself again (effectively nesting itself recursively)
In pseudo-code it looks like this:
<div>
<strong>{{ key }}</strong>:
<template v-if="isStringOrNumber(value)">
{{ value }}
</template>
<object-entry
v-else />
</div>
This ensures that we will keep indenting until we encounter the "bottommost" value that is either a number or string.
Note: You cannot truly get rid of the object index in the markup, due to the way your data is structured: if climbing is supposed to only contain 'easy' and 'height', they should not be double nested inside a meaningless key of 0. Likewise, for easy and height, it makes little sense they are stored as array of objects when it should be just an object itself.
See proof-of-concept here, with suggested changes to your data (you can also use your original data structure, but it will come with an extraneous level of nesting):
Vue.use(Vuetify);
Vue.component('object-entry', {
template: '#object-entry-template',
props: ['entryKey', 'entryValue'],
methods: {
isStringOrNumber: function(v) {
return typeof v === 'string' || typeof v === 'number';
}
}
})
var vm = new Vue({
el: "#app",
data: () => ({
obj: {
'min_mix': 1,
'max_mix': 1,
'climbing': {
'easy': {
'hour': 1.0,
'id': 0
},
'height': {
'hour': 1.0,
'price': 100.0
}
}
},
})
});
<link href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<object-entry
v-for="(value, key) in obj"
v-bind:key="key"
v-bind:entry-key="key"
v-bind:entry-value="value" />
</v-app>
</div>
<script type="text/x-template" id="object-entry-template">
<v-card-text class="pt-0 pb-0">
<strong>{{ entryKey }}</strong> :
<template v-if="isStringOrNumber(entryValue)">
{{ entryValue }}
</template>
<!-- Here, the component nests itself if value is not a string/number -->
<object-entry
v-else
v-for="(value, key) in entryValue"
v-bind:key="key"
v-bind:entry-key="key"
v-bind:entry-value="value" />
</v-card-text>
</script>

using 'v-for' to output object to list

I have an object that get dynamically updated with various key/value, for the most part it will look like below:
object: {
parentKey1:{
childKey1:'value',
childKey2:'value'
},
parentKey2:{
childKey3:'value',
childKey4:'value'
}
}
I am then using 'v-for' in a list to export the object, like so:
<ul>
<li v-for="(value, key) in object">{{ key }} - {{ value }}</li>
</ul>
Now, it's displaying on the DOM generally how I want it, except that its printing out {} curly brackets around the values.
PARENT - { "CHILD": "VALUE" }
I'd like it to be:
PARENT - CHILD VALUE

Try this
new Vue({
el: '#app',
data: {
object: {
parentKey1: {
childKey1: 'value',
childKey2: 'value'
},
parentKey2: {
childKey3: 'value',
childKey4: 'value'
}
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<div v-for="(value, key) in object">
{{key}} -
<span v-for="(cvalue, ckey) in value">
{{ ckey }} {{ cvalue }} {{' '}}
<span>
</div>
</div>

You need to provide a new nested iteration to do that.
<ul>
<li v-for="(parentValue, parentKey) in object">
<template v-for((childValue, childKey) in parentValue)>
{{ parentKey }} - {{ childKey }} {{ childValue }}
</template>
</li>
</ul>

Well the value is still an Array thats why it is displayed like that.
Maybe try
<ul>
<li v-for="(value, key) in object">{{ key }} - <span v-for="val in value">{{ val }}</span></li>
</ul>

Issue on Passing param to Template as Variable in Html Using Vue JS

I use Vue js to implement template system, its completely dynamic.
So i need to pass attributes and variables to template and each template has different values.
I done on passing attributes, but issue on passing value of a variable.
Here,
My HTML :
<div v-for="product in productsList">
<block v-if="column == 4 || column > 4"
:listAlign="showList ? 'left' : 'center'"
:product_name = product.name
:showAction="showAction"
:block_class="showList ? 'col-md-12 col-sm-12 col-xs-12' : 'col-md-3 col-sm-6 col-xs-6'">
</block>
</div>
Here, i have to pass the value of 1. product_name, 2. product_price, 3. showAction
Also the Class and Align attributes are passed successfully.
My Template :
<template v-if="showTemplate" id="campaignBlock">
<div :class="block_class" :align="listAlign">
<p>#{{ product_name }}</p>
<p>Price : #{{ product_price }}</p>
<input v-show="showAction" type="button" #click="alt()" class="btn btn-default
" value="Action">
</div>
</template>
My VueJS :
Vue.component('block', {
template: '#campaignBlock',
props: ['block_class', 'align', 'listAlign','showAction', 'product_name','product_name'],
data: function () {
return {
n: 0,
nb: 1,
column: 2,
showPrice: false,
showAction: true,
showList: false,
listAlign: 'left'
}
}
});
I only having trouble with passing variables to template.
Is this concept is possible ?
Or any other solution for this issue ?
Thanks in Advance.

What exactly error you are getting. I have corrected few mistakes, check below:
<template>
<div v-if="showTemplate" id="campaignBlock">
<div :class="{'col-md-12' : block_class_var}" :align="listAlign">
<p>{{ product_name }}</p>
<p>Price : {{ product_price }}</p>
<input v-show="showAction" type="button" #click="alt()" class="btn btn-default
" value="Action">
</div>
</div>
</template>
Here is the documentation of using dynamic class in vueJs.