How can I create a custom loading indicator in Nuxt.js?

Inside this page (https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators) says that I can create a custom loading indicator but not says how. Somebody can help me – how to create and set this into to nuxt.config? Answer Here is a collection of default loading indicators in Nuxt.js source code. Basically, you can specify the HTML template to use as a loadingIndicator in nuxt.config.js. Note, that indicators can have access to

Vue js – Set alt image when image source not found

I am working on a site which has a list of products. Each product has a corresponding image. I am binding the image url to the source attribute like below. If the image is not found, I want to show a default image. I do as below in cshtml razor syntax (for reference only) How do I achieve the same in Vue? Answer You can set an onerror handler function with @error in Vue:

How to set the value of a background Image in Vue using a URL generated by an API

I am trying to set the value of the background image of my #app element in Vue to the response that is generated from Unsplash’s API. I am able to retrieve the image URL, but I am having some difficulty in trying to relay that information to the background style element. Overall, my goal is to use a random image and display it on the screen every page reload. My method: I pulled down the URL from the Unsplash API in the methods section I then created an image in the data section and set that equal to the response

listout all the files of a folder to the right side of a container using vuejs

In my application, i have list of folders and each containing some files. I have to display those files while choosing particular folder. Those folder will be in left side.While selecting that folder, files will be listed out in right side. my json is like this: So if i choose ‘Animals’ folder then two files will be listed out in right side. Like these : I am new to vuejs. How can i achieve this? Answer You can list the folders on the left side and a variable files on the right side that would be updated by those of

Error in v-on handler: “ReferenceError: number is not defined”

I started working on small project using Laravel and Vue.js. I tried to use v-model to set a value, but I get an error as seen below: Error message that I get: Answer v-model takes the name of a local data prop, so you should not use an expression there. However, v-model only makes sense for user input elements (e.g., <input>, <select>, etc.), not for readonly elements, such as <a>. If you intended to set number to 1 upon clicking <a>, I recommend moving that code into the edit() method already bound to the click-event:

Show an element if date is before or after another date using Vue js

I’m using vue to dynamically show elements (called boxes) on the page, but I need to display an element based on if it’s start date is before or after today+1 week. So if the box.start_date is before one week from today, then show it, else hide it. I’m not sure how I can do this in vue ie. I tried using moment.js but it give me an error saying moment is not defined in vue With laravel and blade I would just do this like this… How can I make this work with vue? Answer Try to use a computed

How to concatenate . (dot) with number in javascript

hi ive created visual calc using html and its looks like this .. and ive created function called number() on click on each html element and this is it with numbers 0123456789 everything is working fine but my problem with the . how can i add . to this.total_quantity_discount_price i mean how can i add the number 10.555 or 55.648 ect .. thanks .. Answer Use Number constructor like

Vue.js component: Props as object doesn’t work with x-template

To simplify the markup of a Vue component, I’m trying to use an object for the props. When defining the template of the component as described in the code example on Components Basics — Vue.js all works fine. But trying to define the template as an x-template, I’m getting an error saying, that the property ‘title’ of undefined cannot be read. Here’s the code: Is it not possible to access object properties in a x-template or is there something wrong with my code? Answer Two things: Take the x-template outside of your app div. Vue is going to replace all

Vue change color of input field when clicked delete button

I am really new to vue js and I am trying to change the input field color when user click on the trash-fill button. Currently when I upload a character on input field it changes the color to green. Is there a way to change input field color from green to white when the user click on <b-icon icon=”trash-fill” font-scale=”1.5″ @click=”deleteRfidBeforeReload($event, index, 10)”></b-icon> ? View Script My code on JSFIDDLE https://jsfiddle.net/ujjumaki/7qsnvftm/17/ Answer I see that you are using the ternary operator. You could introduce a new property in your objects in your array, which we would toggle true or false,

How to store strings for translation in Vue project

I want to use two Languages in my application – so i want a dictionary like string file (kinda like in android development) where i simply store my strings with id’s and can access the strings easily by id perhaps with a parameter for my language. What kind of file is easy to parse in my vue components and is suitable for my use case? Answer You can use normal js file and exporting normal object containing the strings. However I highly recommended you to use vue-i18n instead. Install: npm install vue-i18n or if you are using Vue Cli, run: