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:

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

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

VUEX, what to do when $store.state is null

When users are not logged into my website, the state of user is set to null. However, this throws up a lot of issues on some pages where i look to see if this.$store.user For example, if I were to have a simple check such as and the user is not logged in (thus, setting the state of user to null by default) I get this error; How should I correctly handle this sort of issues so that my console does not get flooded with typescript errors? My initial idea was to first check if user.loggedIn == true and wrap

Change buttons color in a vuetify list

After having tried to figure this out for two days I thought I will ask you. I think I do have a simple problem, however because of limited knowledge I’m not able to find a solution. Basically, I do have a list with OK/NOK buttons and I want to change the background color of the (clicked) button (either green or red) But how to get the reference to the clicked button? This is to set the result to the OK/NOK value: Thank you in advance for your help! N. Answer Add a data property called indexes which is initially an

Vue drag & drop in Recursive component & recursive nesting

Im working with Vue to create recursive Tree component, currently I have added support for checkboxes and expanding nodes, but Im having a bit of trouble with building drag & drop in recursive component Is there any way to implement drag & drop with this sample: Codesandbox Link I can get node that is dragged but on drop I do not get destination node ? On Drag stop I only get dragged node, Should I add on some more places listeners ? Here I only get dragged node ? Note: I do not want a solution with VueDraggable Im looking

splice in javascript(vue) not working as expected after adding class dynamically

I’m trying to delete an element from an array using array splice method. I’m also using animate.css and I dynamically add the class ‘fadeOutDown’ before deleting the element. Then I’m using a timeout function to wait for the animation to complete and remove the element from the array using index. When I click the delete button the index of the element performs the animation but additionally the very next index is also removed from the DOM but not from the array. Below the html and js-function for removing the element: Answer The problem is that using index as key. You

access method outside vue component

i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn’t access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn “Property or method ‘replyComment’ is not defined on the instance but referenced during render”. can anyone help me please? Answer replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance’s template (#replykomen). Move/copy the method to the first Vue