I am trying to print an integer in Vue2 with commas as thousands separators. For example, I want to show the number 34567 as "34 567". How would I go about doing this?
<v-carousel-item
v-for="item in RANDOM_PRODUCTS"
:key="item.id"
>
<span
class="name_item_price"
>
{{ item.price[0].replace(/(\d)(?=(\d{3})+$)/g, '$1 ') }}
</span>
</v-carousel-item>
This option used to work, but now it gives an error on some pages.
Error:
Error in render: "TypeError: Cannot read property 'replace' of undefined"
Vue.js allows you to define filters that can be used to apply common text formatting.
<span
class="name_item_price"
>
{{ item.price[0] | capitalize }}
</span>
define a filter globally before creating the Vue instance:
main.js
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.replace(/(\d)(?=(\d{3})+$)/g, '$1 ')
})
Related
Im whatching a vue.js course and the presentator use this code for an if/else stament on the vue component.
Please if someone can tell me, to understand a way more better the code, im be appreciative.
<template>
<!-- ? = if // : = else -->
<div :class="[task.reminder ? 'reminder' : '', 'task']">
<h3>{{ task.text }}
<i class="fas fa-times"></i>
</h3>
<p>{{ task.day }}</p>
</div>
</template>
<div :class="[task.reminder ? 'reminder' : '', 'task']">
source: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax
this line will conditionally add array of class that will be joined by a space . So on the first element of the array, it is a ternary operator which depend on task.reminder value, if it is true or something meet the requirement of the ternary, it will add reminder class or an empty string '' which will not be added to the class, and on the index 1 of the array which is task will be added.
Say for example that your task.reminder is true, the div will be render as below:
<div class="reminder task">
if it is false, it will be render as
<div class="task">
{{ task.text }}
source: https://v2.vuejs.org/v2/guide/syntax.html?redirect=true#Text
this is how we render out a variable from vue into the DOM, wrap with {{ and }}
<span v-for="(indicator, i) in indicators" :key="indicator.id">
{{ indicator.name }}
<span v-if="i !== indicators.length - 1"> vs </span>
Is there any way to save the value of indicator name in a variable and then using that somewhere else on .vue file?
It works all fine like this:
{{indicatorName = indicator.name }}
and then use it as {{indicatorName}} in the code
When I bind the class attribute to Vuetify's v-chip, I have to use backtick:
<v-chip small :class="`${project.status}`">
{{ project.status }}
</v-chip>
But if I use the code below, why does it show an error?
<v-chip small :class="{{project.status}} ">
{{ project.status }}
</v-chip>
This is invalid syntax in any Vue version:
<v-chip small :class="{{project.status}} ">
v-bind and : colon shorthand expect an expression as a value. `${project.status}` is valid JavaScript expression that is evaluated to stringified project.status value. {{project.status}} isn't valid JavaScript expression because it contains extra {{ and }} interpolation delimiters.
A correct Vue 1.x syntax would be to use interpolation delimiters without v-bind:
<v-chip small class="{{project.status}}">
This syntax has been removed in Vue 2.
It should be either:
<v-chip small :class="`${project.status}`">
Or:
<v-chip small :class="project.status">
Notice that they are interchangeable only if project.status is a string.
I am trying to figure out how to re-render a list of name types. I want to ensure that only one name with type 0 (primary) exists at a time, so I want to enable/disable that option based on the number of names in my array with type 0.
<a v-for="type in names.types" v-bind:class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
#{{ type.type }}
</a>
How can I make my list get re-rendered every time I add/remove a name?
Work directly with the nested data and bind to the key property for each item:
Template
<a v-for="type in types"
:key="type.type"
:class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
#{{ type.type }}
</a>
Script
computed: {
types() {
return this.names.types
}
}
This question already has answers here:
VueJS conditionally add an attribute for an element
(11 answers)
Closed 4 years ago.
I'd like to learn what is the best way to conditionally render an HTML attribute in Vue.js. For example, add data-toggle="tooltip" if there is a tooltip message for current instance.
The code I have now:
<span
:data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
:title="col.col_spec.tooltip"
>
{{ col.col_spec.title }}
</span>
Though, I don't like the 2nd line much… Even if I use computed property here, I'd prefer not to have data-toggle attribute at all, when there is no tooltip to display.
Very so elegant solution:
<span
:data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
:title="col.col_spec.tooltip"
>
{{ col.col_spec.title }}
</span>
Yes, yes, yes, it's just necessary that there is not an empty string, but a Boolean false
Something like:
<span ref="column">
{{ col.col_spec.title }}
</span>
And in Vue:
mounted(){
if (this.col.col_spec.tooltip){
this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
}
}
A bit late, but here is my take on it:
HTML:
<span
:data-toggle="tooltip"
:data-original-title="tooltipTitle"
>
{{ tooltipTitle }}
</span>
Vue:
methods: {
tooltipTitle: function() {
var title = this.col.col_spec.title;
if (!!title) return title;
return false;
}
}
This will remove the "data-original-title" attribute if there is none to display, consequently removing the tooltip altogether. You must use "data-original-title" instead of just "title" because Bootstrap will automatically add it once you initialise the "title" attribute, and changing "title" to false will not remove the "data-original-title".
Here's another working but not so elegant solution:
<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
{{ col.col_spec.title }}
</span>
<span v-else >
{{ col.col_spec.title }}
</span>