I’m using the VueJS Vuetify framework and I need to open a dialog – that gets imported as a component template – from another template. Once the Menu button in App.vue got clicked, the Modal should open. Here is my setup: App.vue = navigation template with Menu button Modal.vue = Modal template, imported as global in main.js main.js Modal.vue Template:
Tag: vuejs2
Vue.js directives on html rendering
I made this pen. Simple tabs using Vue.js. Each tab get it’s content from this object: To render each tab content: I’m stuck trying to make those click directives on ‘tab.content’ work 🙁 Am I missing something? Thanks in advance. Answer v-html is not Vue content, it is simply innerHTML for an element. You will not be able to use
Unable to import/export vuejs components
I have a folder like this. Classic and Modern are simple components with template, export default {} and a style. I am calling both inside index.js as: So, when I import this module as: I get this error Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option. I have
Vue – adding a Class-Name to a Component using a prop
I would like to make a custom component in Vue with the following props: text = text to be displayed in the link. icon = identifier of the icon to be displayed next to the link. < sidebar-link text=”Home” icon=”fa-home”> I have the following .Vue template for my component. Essentially I have the default Font-Awesome code in my template: and
HTML datalist keeps crashing when dynamically loaded with Vue
I’m using Vue.js to load an HTML datalist. Whenever I type in my input box that is connected to my datalist, my page freezes (using Chrome). I’m using jQuery to make an AJAX call to initially get all of my users when the page loads, then using the JavaScript filter function to make a new array that has indexOf whatever
How to fade in images when loaded with Vue
I created this component that fades in an image once it is loaded to the client. I would think there is a more Vue-like way to solve this, like using Vue events, but could not find it. What is the Vue way to detect when an image is loaded? https://codepen.io/kslstn/pen/ooaPGW Answer You can use the v-on: (or @ shorthand) syntax
Change the default base url for axios
I have configured my axios like this Inside my component, I make a call as Now the above works but I would like to change the baseURL without affecting the global base URL so that in my component I can simply use it without API endpoint so I’ve tried How do I go about this? Answer Instead of use If
Vue compile when inserting in DOM
I need to insert a compiled element into the DOM, however it will be inserted into a random place, not in a pre-defined location as is documentation… All approaches with V-for, V-if/show will not serve as they also require predefined elements. I tried something like this… It returns an object containing ‘ render ‘ and ‘ StaticRenderFns ‘, but did
Vuejs Get a button to only print once inside a v-for
So basically what i am trying to do is to get a button to only show for the first item within the v-for. I want to be able to add a button and for it to be only printed once no matter how many times the v-for loops round. Here is the JSFiddle with the code and also code posted
vue v-for with filter gives error
I’m trying to use a local filter with v-for but I’m getting an error Property or method “filterByTitle” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. Code below Answer Filters are limited in Vue 2 primarily to formatting