For example I have 1000 cents which would be 10 dollars, how can I do it?
this is my code, I have data taken from an API
<b-button variant="outline-primary mb-2">
{{contract.reward_cents}} {{contract.reward_currency}}
</b-button>
i'm not sure if i understand you correctly. you just want contract.reward_cents to be converted to dollars?
you can do it like this:
{{ Number(contract.reward_cents)/100 }}
Related
I have some html code and i am displaying some value like this
<h4 class="text-dark pull-right">
<strong>USD {{item.addbedrooms[0].the_price_per_night }}</strong>
</h4>
I got the displayed value from a web service that only allows one to display the data like above. Is there a way i can do some arithmetic on the expression like
<strong>USD {{item.addbedrooms[0].the_price_per_night }} x {{duration}} </strong>
This produces USD 27*1 and not a multiplication. Is it possible to multiple at this level?
Anything you output from {{ }} is converted to a string in the template. You can do it by having the arithmetic operation within the {{ }}
<strong>USD {{item.addbedrooms[0].the_price_per_night * duration}} </strong>
But I would recommend that you optimize your array via a computed and not add any methods into your template.
I am work in company with big frontend team, and guys use multiple template tag in single file components. Before that I never see something like this, for me it bad practice. But head developers think that I am stuped, when I ask about that.
Can some one please explain me, when I must use it and why? and if it possible please give link to vue documentation.
And yes, we use vuetify.
example:
<template>
<VContainer>
<VRow>
<VCol>
<h2>
{{ title }}
</h2>
<p>
{{ subtitle }}
</p>
</VCol>
</VRow>
<Share />
<template v-if="p.length > 0">
<VRow>
<VCol>
{{ text }}
</VCol>
</VRow>
<VDivider/>
</template>
<template v-for="(t, index) in ts">
<VRow :key="index">
<VCol v-if="t.p.length > 0">
{{ text }}
</VCol>
</VRow>
<VDivider
v-if="index < t.length - 1"
:key="`divider-${index}`"
class="mx-3"
/>
</template>
</VContainer>
</template>
The <template> used here is just a way to handle loops or conditionals without inserting extra nodes into the DOM.
You could put the v-if or v-for directly on the <VRow> instead of on a <template> that wraps it, but sometimes that's undesirable -- if there are already other conditions there that you want to keep separate, or if you want to wrap multiple nodes in the same condition, as in your example where you have both a <VRow> and a <VDivider> contained in a single <template>.
It's not bad practice and has no undesirable performance effect at all. Your head developers should be better able to communicate that to you rather than calling you 'stupid'.
I think it does't matter use multiple template, We should not use div wrapper the condition render Component, the div will insert to DOM.
here is the official documemnt https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt
I have a query Object that returns 357 columns (e.g, fullRecord). For a certain portion of my UI, I want to query through a subset of about 125 of those items and display them in a list. I have the column names of those items I want to display in an array (e.g., colsWanted).
I am trying to figure out how to dynamically iterate through the "colsWanted" array and display the appropriate "fullRecord.colsWanted(Item)" in the vuetify interface. I've tried what feels like a million different iterations of this but here is the latest which shows an error:
<v-flex v-for="(value, index) in colsWanted" :key="value">
<v-card flat>
<span v-if="fullRecord[value] in fullRecord">
<strong>{{ index }}. {{ fullRecord[value] }}</strong>
</span>
<span v-else class="error--text">Not Available</span>
</v-card>
</v-flex>
I actually get no errors at all from this; but no results are displayed when they should in fact return results.
Thanks in advance for any assistance.
Your object key selection is wrong:
<span v-if="fullRecord[value] in fullRecord">
fullRecord[value] will retrieve the value of the value key, which will not be in fullRecord.
What you should be using is:
<span v-if="value in fullRecord">
or
<span v-if="fullRecord.hasOwnProperty(value)">
Also I would rename value to key since thats what it actually is.
How would one go about applying a VueJS filter (i.e. {{ price | currency }}) to data displayed using vue-tables-2?
I tried playing around with slots with one of the demo tables to no avail: https://jsfiddle.net/jfa5t4sm/11/
This is a bit annoying, as 'custom filters' mean different things in different context, so searching the docs is not bearing fruit.
Anyone have ideas?
Since it's a scoped slot you have to access the value through the props object and give it the correct slot name.
<template slot="price" scope="props">
<div>
<p>{{ props.row.price | currency }}</p>
</div>
</template>
Working JsFiddle
I had a question about microfomats and more specifically hreview-aggregate. A client implemented them a while ago but they are not showing in the SERPs however Google's rich snippet testing tool shows them working perfectly. I took a look at the code and it is currently
<div class="hreview-aggregate">
<div class="rating-45 clearfix">
<span class="rating" title="4.383 of 5 stars">4.383 of 5 stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
<span class="count">View all xxxx Reviews</span>
</a>
</div>
</div>
I changed it up to include class="average" class="best" and a few other spans that they were missing.
<div class="hreview-aggregate">
<div class="rating-45 clearfix">
<span class="rating" title="4.383 of 5 stars"><span class="average">4.383</span> of <span class="best">5</span> stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
View all <span class="count">xxxx</span> Reviews
</a>
</div>
</div>
Will the updated code finally show in the SERPs? Also, the page only has the rating but no reviews, should I use COUNT or VOTES?
I doubt the Google Rich Snippet Tool would pass this. The hreview-aggregate specification (specification) states an item needs to be specified that is being reviewed.
I've also seen the rich snippet tool speak of an average property, but the specification doesn't mention it, if you use value instead of average you comply to the spec and the rich snippet tool picks it up. And you should round the number to one decimal.
You should indeed use votes instead of count if the page doesn't contain any individual reviews.
This is an old question but to those still using hreview-aggregate.
The structure more or less is as follows:
<div class="hreview-aggregate">
<div class="item">
<span class="fn">Item Name</span>
</div>
<div class="rating">
<span class="average">3.5</span>
<span class="best">5</span>
<span class="count">15</span>
</div>
In your code you should have something like this:
<div class="hreview-aggregate">
<div class="item">
<span class="fn">Item Name</span>
</div>
<div class="rating-45 rating clearfix">
<span title="4.383 of 5 stars"><span class="average">4.383</span> of <span class="best">5</span> stars</span>
<a tabindex="0" href="https://www.example.com/category/" title="View all xxxx Reviews">
View all <span class="count">10</span> Reviews
</a>
</div>
</div>
So that it fully validates with: https://search.google.com/structured-data/testing-tool
Should I use COUNT or VOTES?
From the microformat doc itself: http://microformats.org/wiki/hreview-aggregate
count:: This property is used to specify the total number of reviews for the product or service.
votes:: This property is used to specify the total number of users who have rated the product or service, contributing to the average rating. For some sites, the number of votes is equal to the number of reviews, so count may be used and this property omitted.
in your case, see my example with count as I believe this is most applicable to you.
As mentioned before there are several factors that can cause google not to show it.
Google itself says:
When Google finds valid reviews or ratings markup, we may show a rich snippet that includes stars and other summary info from reviews or ratings.
Keyword: MAY
https://developers.google.com/search/docs/data-types/reviews#review-snippets
from my experience they usually do, just make sure its properly formatted and validated.