link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] How to make a <select> tag in html only shows some data depending on another <select> tag using Vue.js

I’m displaying two <select> elements. The second <select> is disabled depending on the <option> selected on the first <select>. The problem is when I select an <option> on the first <select>, the data shown on the second <select> to be changed. For example, if I select District 1 on the first <select>, to see john and mary as options in the second <select>, but if I select District 2, josef and charles. Consider that I’m doing this on Laravel and using Vue.

there is done the first part using Vue, disabling the second <select> depending on what has been chosen on the first <select> (only third option on the first <select> will enable the second <select>):

https://jsfiddle.net/vowexafm/122/

Template:

<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

<div id=”app”>
<select @change=”treat”>
<option value=”District1”>District 1</option><!–disable 2nd select–>
<option value=”District2”>District 2</option><!–disable 2nd select–>
<option value=”District3”>District 3</option><!–enable 2nd select–>
</select>
<br><br>
<select :disabled=”isDisabled”>
<option>cds 1</option>
<option>cds 2</option>
<option>cds 3</option>
</select>
</div>

Script:

new Vue({
el:’#app’,
data: {
isDisabled: true,
},
methods: {
treat: function(e) {
if (e.target.options.selectedIndex == 0 ||
e.target.options.selectedIndex == 1) {
return this.disable();
}

if (e.target.options.selectedIndex != 0 &&
e.target.options.selectedIndex != 1) {
return this.enable();
}
},
enable: function() {
return this.isDisabled = false; // enables second select
},
disable: function() {
return this.isDisabled = true; // disables second select
}
},
});

Now the solution I want,for example: if i’I select District 1 on the first , to see john and mary as options in the second , but if I select District 2, to see josef and charles on the second .

Solution :

Populate data object from laravel to have the options for the second select in it and a value for the current selected index from the first select

data: {
secondSelect: [
[‘john’, ‘mary’],
[‘josef’, ‘charles’]
],
currentIndex: 0
}

Define a computed property that returns the values for the second select depending on currentIndex

computed: {
persons () {
return this.secondSelect[parseInt(this.currentIndex)]
}
}

Generate the second select using the computed property persons and use v-model to capture currentIndex.

<div id=”app”>
<select @change=”treat” v-model=”selectedIndex”>
<option value=”0”>District 1</option><!–diable–>
<option value=”1”>District 2</option><!–diable–>
<option value=”2”>District 3</option><!–unable–>
</select>
<br><br>
<select :disabled=”isDisabled”>
<option v-for=”option in persons” :value=”option”>{option}</option>
</select>
</div>

Solution 2:

now the solution I want,for example if i select ‘District 1 ‘on the
first to see ‘john’ and ‘mary’ as options in the second , but
if I select ‘District 2’ to see ‘josef’ and ‘charles’ on the
second .

is that whats in the mind?

new Vue({
el:’#app’,
data:{
district:’-1’,
options:{
‘District1’:false,
‘District2’:false,
‘District3’:false
},
},
methods:{
getOptions(){
axios.get(‘https://jsonplaceholder.typicode.com/users',{district:this.district}).then(res=>
this.options[this.district]=res.data)
}
}
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

<div id=”app”>
<select v-model=”district” @change=”getOptions()”>
<option value=”-1” selected disabled hidden>choose a district</option>
<option value=”District1”>District 1</option>
<option value=”District2”>District 2</option>
<option value=”District3”>District 3</option>
</select>
<br><br>
<select v-if=”options[district]“>
<option v-for=”option in options[district]“>{option.name}</option>
</select>
</div>

edit:

after the comment, i edited this answer so now its fetching the data from some api.

to fetch the options from a db, you first have to create an api for the app, and when the request comes out of the vue.js client side - the server will retrieve rows from the db, do some caculations based on the parameters you sent in the request, and bring back a json data array.

(i wont cover the server side now - thats completely off-topic. but you can easily google for ‘laravel json response’)

in this snippet, i used some example json api, just to show you how its done on the client side:

i use v-if to cause late- rendering of the second select. it will be rendered only after i get the options, via axios (a very common npm package used to make ajax requests in modern js frameworks).

im also registering an event listener to the change event of the first select - to make my ajax request and populate my options every time the disrict changes (i used a default option to avoid unneeded requests)

[Vue.js] How to recover data to a database from the validation of a form in vuejs?

I created a promo code form when I paid for an item, but after filling out the form and clicking “Update”, I get an error in the console. My request does not leave.
However, when I replace in the controller:

$couponDs = ModeratorPromoCodes::where(‘promo_code’, $request->promo_code)->first();

by

$couponDs = ModeratorPromoCodes::where(‘promo_code’, ‘azerty03’)->first();

there is a feedback in my console and my output is filled correctly.

The error code is :

POST http://dev.xxxxxxxxx.local:8000/fr/studio/coupon 500 (Internal Server Error)
(anonymous) @ VM6522:1
dispatchXhrRequest @ app.js:16140
xhrAdapter @ app.js:15974
dispatchRequest @ app.js:49732
Promise.then (async)
request @ app.js:49209
Axios.(anonymous function) @ app.js:49229
wrap @ app.js:15763
updatePromoCodes @ app.js:59090
invoker @ app.js:18239
fn._withTask.fn._withTask @ app.js:18038

-—
Error: Request failed with status code 500
at createError (app.js:16165)
at settle (app.js:49281)
at XMLHttpRequest.handleLoad (app.js:16039)

Route in web.php

Route::post(‘/coupon’, ‘CouponController@submit’)->name(‘coupon.submit’);

page.blade.php - Input Form

<form @submit.prevent=”submit”>
{ csrf_field() }
<label class=”form-check-label”>
<input v-model=”promoCodesOptions” v-on:keyup.enter=”updatePromoCodes” name=”promo_code”>
<button type=”submit” v-on:click=”updatePromoCodes”>Update</button>
<p>Reduction code is <i><b>@{ promoCodesOptions }</b></i></p>
</label>
</form>

page.blade.php - Output code

<li class=”list-group-item d-flex justify-content-between align-items-center”>
@{ reduction }
<span class=”badge badge-primary badge-pill”>- @{ output } </span>
</li>

CouponController

namespace App\Http\Controllers;

use App\Coupon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use App\Models\ModeratorPromoCodes;

class CouponController extends Controller
{
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function submit(Request $request)
{
//$data = $request->all();

$couponDs = ModeratorPromoCodes::where(‘promo_code’, $request->promo_code)->first();

//$couponDs = ModeratorPromoCodes::findOrFail(request(‘product’));

return response()->json([
‘code’ => $couponDs->promo_code,
‘discount’ => $couponDs->discount(100)
]);
}
}

VueJS code part


data () {
return {
pricingModal: {
display: false,
prices: [],
total: 0
},
paymentModal: {
display: true,
records: false,
prices: [],
extras: null,
promoCodesData: null,
hourly_rate_activated: false,
hourly_rate: null,
fees: null,
total: 0,
service_rates: []
},
paymentOptions: null,
promoCodesOptions: null,
couponDatas: [],
output: ‘’,
reduction: ‘’
}
},

methods: {
updatePromoCodes: function (value) {
event.preventDefault();
let currentObj = this;
axios.post(route(‘studio.coupon.submit’)).then(response =>{
let data = response.data;
console.log(data);
//currentObj.output = ‘response.data’;
currentObj.reduction = ‘Reduction’;
currentObj.output = data.discount;
this.paymentModal.total = this.paymentModal.total + data.discount;
}).catch(error => {
console.log(error);
});

this.paymentModal.promoCodesData = null;
this.paymentModal.promoCodesData = value;

this.paymentModal.total = this.paymentModal.total + data.discount;
},
}

Solution :

The most likely culprit is that the promo code you are searching for does not exist. In that case, $couponDs is null. You then try to access promo_code and a method discount on a non-object. Instead, check if you actually found a promo code, and act accordingly.

N.B. I normally use $request->get(‘promo_code’). when not 100% sure that $request->promo_code works as you expect, but since Laravel works a lot with magic getters and setters it would not surprise me that it does actually return what you expect. You can dump this variable to see what it returns.

Edit: After the comment, I noticed that you are calling axios.post(..) without sending any data. You just call it with the route. Instead, you want to be passing the data in the second argument of that method:

axios.post(
route(‘studio.coupon.submit’),
{
promo_code: this.promoCodesOptions
}
).then(…)

You may run into the problem that Laravel is unable to parse the data you send it. Make sure to send the correct Content-Type header in the config as the third argument. For all request config options, see the documentation.

[Vue.js] How do I get Bootstrap's Javascript to work in Vue (Gridsome)?

Link to my site:

https://inspiring-curran-a31177.netlify.com/

It’s using Gridsome, the static site generator for Vue.

When you go down to mobile and click on the Bootstrap Hamburger menu, it won’t open.

I’ve followed the instructions in Gridsome’s docs by installing BootstrapVue: https://gridsome.org/docs/assets-css/

There are no Javascript errors in the console.

Code from /src/main.js:

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-
api

// Import nav
import DefaultLayout from ‘~/layouts/Nav.vue’
// Import footer
import Footer from ‘~/layouts/Footer.vue’
// Import Bootstrap
import Bootstrapvue.js from ‘bootstrap-vue’
// Import Bootstrap CSS
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap-vue/dist/bootstrap-vue.min.css’
// Import Bootstrap JS
import ‘bootstrap-vue/dist/bootstrap-vue.min.js’

export default function (Vue, { router, head, isClient }) {
// Set default layout as a global component
Vue.component(‘Layout’, DefaultLayout),
// Footer
Vue.component(‘Footer’, Footer)
// Import bootstrap
Vue.use(BootstrapVue),
// Add google fonts
head.link.push({
rel: ‘stylesheet’,
href: ‘https://fonts.googleapis.com/css?family=Source+Sans+Pro'
})
}

Solution :

Did you install all the scripts in the HTML ?

<script src=”//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js”></script>
<script src=”//unpkg.com/vue@latest/dist/vue.min.js”></script>
<script src=”//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js”></script>

Solution 2:

Welcome to SO!

Let’s say you’re using Bootstrap npm module.

npm i -s bootstrap

in the Main.js file

import “bootstrap”;
import “bootstrap/dist/css/bootstrap.min.css”;

For Hamburger please find the codesandbox, where bootstrap menu is used

Hope this helps!

Solution 3:

Found the solution!

I had to use the navbar directly from Bootstrapvue.js as a component, which is here - https://bootstrap-vue.js.org/docs/components/navbar. Instead of using a standard bootstrap navbar, right from the main bootstrap site.

[Vue.js] vue js cannot use custom axios settings

I’m using axios in my cue project and trying to set some custom default setting to use it.

So i made a axios.js file

import axios from ‘axios’

const API_URL = ‘http://localhost:8081'

export default axios.create({
baseUrl: API_URL,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer ‘ + localStorage.token
}
})

then i mounted it in here /components/axios/index.js using my axios

import vue.js from ‘vue’
import VueAxios from ‘vue-axios’

import axios from ‘./axios’

Vue.use(VueAxios, axios)

In this way i should have set globally axios with my settings right?

So in my Login.vue.js component file i call this method

login() {
this.$http
.post(“/oauth/token”, {
username: this.email,
password: this.password,
client_id: “test”,
client_secret: “test”,
grant_type: “password”
},
)
.then(request => this.loginSuccessful(request))
.catch(() => this.loginFailed());
}

but $http does not have my custom settings but axios generic

Solution :

Well, I run into the same issue and found that baseURL is case-sensitive.

Hence baseUrl should be baseURL and everything will work fine.

Here is axios documentation for the creating instance.

const instance = axios.create({
baseURL: ‘https://some-domain.com/api/',
timeout: 1000,
headers: {‘X-Custom-Header’: ‘foobar’}
});

Here is working Codesandbox

Hope this helps!

Solution 2:

good luck to find an answer.
But are you sure to use correctly axios ?
I see this.$http.post is for the normal request without axios and on npm VueAxios don’t use this.

I can recommend you this link
https://fr.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

[Vue.js] How do I send a for loop item to a method

when attempting to attach an AlumbId to an image src tag. what there is found is that I need to use a method to use the link and send it back. I’m not sure if this is the best way but there is that working fine but for some reason the method is sending the AlumbId as ‘undefined’ so when not getting an image back.

<template>
<div id=”tracks”>
<div id=”track” v-for=”track in tracks” :key=’track.id’>
<img class=”cover” :src=”getAlbumImg(track.albumId)” />
<div class=content-name>{track.albumName}</div>
<div class=”artist-name”>{track.artistName}</div>
<audio controls class= “audio”>
<source type=”audio/mpeg”>
</audio>

</div>
</div>
</template>

<script>
import axios from ‘axios’;
export default {
name: ‘Tracks’,
data () {
return {
tracks: []
}
},
created() {
axios.get(‘http://api.napster.com/v2.2/tracks/top?apikey=YTkxZTRhNzAtODdlNy00ZjMzLTg0MWItOTc0NmZmNjU4Yzk4')
.then(response => {
// JSON responses are automatically parsed.
this.tracks = response.data
})
.catch(e => {
this.errors.push(e)
})
},
methods: {
getAlbumImg: function(albumId) {
return ‘http://direct.rhapsody.com/imageserver/v2/albums/' + albumId + ‘/images/300x300.jpg’;
}
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>

</style>

Solution :

I noticed that I was trying to use the object tracks instead of the array within the object.

[Vue.js] GET http //127.0.0.1 8000/storage/profiles/ 404 (Not Found)

when using vuejs and laravel as backend and there is a form which stores user avatar pic in storage and when trying to show the image in front end in profile page of user using vuejs and when able to display the avatar pic of user in front end but in console i get GET http://127.0.0.1:8000/storage/profiles/ 404 (Not Found) error though its showing avatar pic in frontend.

what i did in frontend part to display user avatar pic is:

<img class=”img-circle” :src=”getProfilePhoto()” alt=”User Avatar”>

getProfilePhoto(){
let photo = this.form.photo.indexOf(‘base64’) != -1 ? this.form.photo : ‘storage/profiles/‘+this.form.photo;
return photo;
}

Solution :

At some point this.form.photo is an empty string. The browser makes a request to the URL, gets a 404 error, and renders a missing image.

Then the value of this.form.photo changes, which triggers a rerender, which runs the function again, changes the src to the new value and renders an actual image.

You need to account for the possibility that this.form.photo isn’t set.

For example, you could:

getProfilePhoto(){
let photo = “/static/default-profile.png”;
if (this.form.photo) {
if (this.form.photo.indexOf(‘base64’) != -1) {
photo = this.form.photo;
} else {
photo = ‘storage/profiles/‘ + this.form.photo;
}
}
return photo;
}

[Vue.js] How to fix z-index with a Modal and a sticky navbar in Vue.js?

Thanks in advance for the help.
I will update this post with the solution because I think some people can have the same issue and after some search on the web I found no answer.

The problem
I use a modal component in a component included in my App.vue. Everything works except with the navbar because when i put the mouse in the window, the navbar become white and go over the black background of the modal.

You can see the front in the image below when the mouse is out.
// Unfortunatelly I need 10 reputations to add it.

To fix that I tried lot of things but nothing works right now. If I delete z-index:1 from the navbar the problem is fixed but if i put some font awesome content on my website, the navbar will appear behind.

The css

nav {
display: flex;
background-color: #FFFFFF;
height: 50px;
position: sticky;
top: 0px;
z-index: 1;
}
.modal-mask {
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background-color: #FAFAFA;
display: flex;
flex-direction: column;
}

The App.vue

<template>
<div id=”app”>
<NavBar></NavBar>
<router-view/>
</div>
</template>

<script>
import NavBar from ‘./components/layout/Navbar’
export default {
components: {
NavBar
},
}
</script>

The modal

<template>
<div class=”modal-mask”>
<div class=”modal”
role=”dialog”>
<slot name=”body”>
No content
</slot>
</div>
</div>
</template>

<script>
export default {
name: ‘modal’,
methods: {
close() {
this.$emit(‘close’);
},
},
};
</script>

Solution :

z-index only works with position try to give position to .modal class relative or absolute

[Vue.js] Passport local authentication deseralizeUser never called

I’m testing passport-local authentication in a test app but I can’t understand why deserializeUser is called when sending a post request with Postman but never called when the post request comes from my front end (Vuejs).
I guess there’s something wrong with my way of managing session but I don’t know what… Could anyone help me to understand?

vue.js frontend:

export default {
name: “Login”,
methods: {
login: (e) => {
e.preventDefault();
let username = “user1”;
let password = “password”;
let login = () => {
let data = {
username: username,
password: password
};
axios.post(“http://localhost:5000/api/users", data)
.then((response) => {
console.log(“Logged in”);
router.push(“/“);
})
.catch((errors) => {
console.log(“Cannot log in”);
});
};
login();
}
}
}

Node backend:

app.use(cookieSession({
name: ‘mysession’,
keys: [‘vueauthrandomkey’],
maxAge: 24 * 60 * 60 * 1000
}));
app.use(passport.initialize());
app.use(passport.session());`

passport-config.js
`passport.use(new LocalStrategy(
function(username, password, done) {
if(User[0].name == username) {
return done(null, JSON.stringify(User[0]));
}
else {
return done(null, false, { message: ‘Incorrect password.’ });
}
}
));

passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => { // never called if request from Vuejs, no problem if the request is sent through Postam
done(null, user);
});

Router:

router.post(‘/‘,
passport.authenticate(‘local’, {
successRedirect: ‘./‘,
failureRedirect: ‘/‘,
failureFlash: false
})
);

If successRedirect:

router.get(‘/‘, (req, res) => {
console.log(req.isAuthenticated()); // true if Postman, false if vuejs
res.send(‘welcome !!!’);
});

Solution :

After browsing the entire web, I finally found the solution.
First I had to explicity ask axios to use credentials:

axios.defaults.withCredentials = true; // in the frontend

This config produced a CORS issue. To fix it I had to set my cors middleware as following server side:

app.use(cors({
origin: ‘http://localhost:8080', // frontend base url
credentials: true
}));

And now it’s working.
Hope it will save time to people facing the same issue…

[Vue.js] Vue best practice for calling a method in a child component

there is been reading lots of articles about this, and it seems that there are multiple ways to do this with many authors advising against some implementations.

To make this simple there is created a really simple version of what I would like to achieve.

there is a parent Vue, parent.vue. It has a button:

<template>
<div>
<button v-on:click=”XXXXX call method in child XXXX”>Say Hello</button>
</div>
</template>

In the child Vue, child.vue.js there is a method with a function:

methods: {
sayHello() {

alert(‘hello’);
}
}

I would like to call the sayHello() function when I click the button in the parent.

when looking for the best practice way to do this. Suggestions there is seen include Event Bus, and Child Component Refs and props, etc.

What would be the simplest way to just execute the function in my method?

Apologies, this does seem extremely simple, but there is really tried to do some research.

Thanks!

Solution :

You can create a ref and access the methods, but this is not recommended. You should’t rely on the internal structure of a component. The reason for this is that you’ll tightly couple the components and one of the main reasons to create components is to loosely couple them.

You should rely on the contract (interface in some frameworks/languages) to achieve this. The contract in vue.js relies on the fact that parent communicate with children via props and children communicate with parent via events.

There are also at least 2 other methods to communicate when you want to communicate between components that aren’t parent/child:

the event bus
vuex

I’ll describe now how to use a prop:

1.Define it on the child component

props: [‘testProp’],
methods: {
sayHello() {
alert(‘hello’);
}
}

2.Define a trigger data on the parent component

data () {
return {
trigger: 0
}
}

3.Use the prop on the parent component

<template>
<div>
<childComponent :testProp=”trigger”/>
</div>
</template>

4.Watch testProp in the child component and call sayHello

watch: {
testProp: function(newVal, oldVal) {
this.sayHello()
}
}

5.Update trigger from the parent component. Make sure that you always change the value of trigger, otherwise the watch won’t fire. One way of doing this is to increment trigger, or toggle it from a truthy value to a falsy one ( this.trigger = !this.trigger)

Solution 2:

One easy way is to do this:

<!– parent.vue.js –>
<template>
<button @click=”$refs.myChild.sayHello()”>Click me</button>
<child-component ref=”myChild” />
</template>

Simply create a ref for the child component, and you will be able to call the methods, and access all the data it has.

Solution 3:

when not sure is this the best way. But I can explain what I can do…
Codesandbox Demo : https://codesandbox.io/s/q4xn40935w

From parent component, send a prop data lets say msg. Have a button at parent whenever click the button toggle msg true/false

<template>
<div class=”parent”>
Button from Parent :
<button @click=”msg = !msg”>Say Hello</button><br/>
<child :msg=”msg”/>
</div>
</template>

<script>
import child from “@/components/child”;

export default {
name: “parent”,
components: { child },
data: () => ({
msg: false
})
};
</script>

In child component watch prop data msg. Whenever msg changes trigger a method.

<template>
<div class=”child”>when Child Component</div>
</template>

<script>
export default {
name: “child”,
props: [“msg”],
watch: {
msg() {
this.sayHello();
}
},
methods: {
sayHello() {
alert(“hello”);
}
}
};
</script>

[Vue.js] VueJS Enable transition only after FIRST load

I’ve got this line in my vue.js component:

<p><b>You have <transition name=”fade” mode=”out-in”><span :key=”todos_counter”>{todos_counter}</span></transition> items</b></p>

The problem seems to be, because todos_counter is coming from vuex store using MapGetters, its real initial value is 0, but then on the initial load it update to (say) 16, so vue.js applied the transition on the initial page-load. I only want a transition if todos_counter changed AFTER the first load.

So basically the initial load to not include ANY transition, but if after the initial component load is completed todos_counter changes, I do want the transition to occur.

This is really tricky, even using watch on the component level is hard because from the watcher’s perspective todos_count DOES change on the first page load.

Solution :

Try this, hopefully it should work God willing.

In the template:

<p>
<b>
You have
<!– Added duration prop here –>
<transition
name=”fade”
mode=”out-in”
:duration=”transitionDuration”
\>
<span
:key=”todos_counter”
\>
{todos_counter}
</span>
</transition>
items
</b>
</p>

In the script:

<script>
export default {
data() {
return {
// this is as if there is no transition, it’s way too fast.
transitionDuration: “1ms”
};
},
mounted() {
setTimeout(() => {
// this will set the duration back to normal after the initial render.
this.transitionDuration = “1000ms”
}, 100)
}
}
<script>

Solution 2:

You really need a way of determining when the data is loading so you can control the transition. Right now the value is initially rendered as 0 and then after loading it changes to 16, so the transition will play.

You can try something like this:

<p v-if=”!loading”>
<b>You have <transition name=”fade” mode=”out-in”><span :key=”todos_counter”>{todos_counter}</span></transition> items</b>
</p>

computed: {
…mapState([‘loading’]),
…mapGetters([‘todos_counter’]),
}

loading must be initially true, then after the initial load it is set to false.

It doesn’t have to be exactly like this, but you get the idea.