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.
Related
I want to show a translation on the title of a component.
Here is the HTML code:
<user-card
:totalUser="totalUsers"
color="primary"
icon="UserIcon"
user-title="Total users"
/>
On my user-card component I have this:
<b-card class="text-center">
<b-avatar
:variant="`light-${color}`"
class="mb-1"
size="45"
>
<feather-icon
:icon="icon"
size="21"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ totalUser}}
</h2>
<span>{{ user-title }}</span>
</div>
</b-card>
And to use translation I have this syntax where I get the translated terms from the JSON file:
{{$t("Total users")}}
How can I implement this on the user-title?
Have a look at this, I have tried to replicate your scenario in code sandbox.
sample app
What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).
Just use v-bind and pass the expression to your user-card component directly:
<user-card
...
:user-title="$t('Total users')"
/>
You're actually already using this syntax in multiple places, this directive just tells Vue to "dynamically bind one or more attributes, or a component prop to an expression", which is exactly what you're looking for here.
This will evaluate $t('Total users') as an expression and then pass the result to your component as a prop.
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 ')
})
I create my list of views link from a array in my data but it`s possible to bind the :to property to a item in my object? something link this
<v-list-tile v-else #click="" :to="{name: '{{item.componentName}}'}" :key="item.text">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
whatever in v-bind should be a valid Javascript expression
in this case, it should just be a valid Javascript Object
:to="{name: item.componentName}"
Your problem is that you're attempting variable interpolation (the {{item.componentName}} part) within a v-bind expression. This isn't supported.
Instead, you can use any valid JavaScript expression and it will automatically detect component-level data scoping (even in a v-for loop!). For instance, your desired expression should be this:
:to="{name: item.componentName}"
As noted with v-for, the following toy example would also be valid:
<div v-for="(item, item_index) in itemsArray">
<my-component :myProp="{name: item.componentName, position: item_index}"></my-component>
</div>
Interpolation is only necessary if you're attempting to render some value outside of a v-binding, e.g. displaying some text:
<div>{{item.componentName}}</div>
This works:
<span v-if="name">
Hi there, {{ name }}
</span>
... but it forces me to use span for the whole text, I just want it on the name variable. In handlebars for example I could do:
{{#if name}}
Hi there, <span>{{ name }}</span>
{{/if}}
You can use a template for that.
we can use v-if on a <template> element, which serves as an invisible
wrapper. The final rendered result will not include the <template>
element.
For example:
<template v-if="name">
Hi there, <span>{{ name }}</span>
</template>
I'm fairly knew to Vue and the whole v-bind thing is throwing me for a loop...
Basically, I'm trying to achieve this syntax, but with Vue's v-bind, since I can't use a variable in an inline CSS style:
<div class="card" style="background-color: {{school.color}}">
Here's my Vue syntax, which I've followed from their documentation, but it's still throwing an error and I can't figure out why? Obviously, it has to be something simple, I just don't fully understand the intricacies of Vue yet!
<div class="card" :style="{ background-color: school.color }">
Any help would be much appreciated!
For object syntax bindings you are binding an object. Thus, the keys must be valid, and need to be quoted unless they are valid unquoted keys. Dashes - are not allowed in unquoted keys, so it fails to compile.
Either of these options will work:
<div class="card" :style="{ 'background-color': school.color }">
or
<div class="card" :style="{ backgroundColor: school.color }">