I’m making a basic To Do app, where I have an input field and upon entering a task and pressing the “Enter” key the task appears in the list. Along with the task the TodoCard.vue component also generates a button, which I would like to use to delete the task. I’ve added a @click=”removeTodo” method to the button, but don’t
Tag: vue.js
Accessing array inside of another array to use v-for
I have an array – ‘items’ of objects and each of them contains an array of more objects. I would like to access the second array ‘productPrices’ to use v-for. But items.productPrices doesn’t work for me. Should I create double loop somehow? HTML: JS: Here is a fiddle. Answer While you can do this with <template> … </template> as the
Proper way of adding CSS file in Vue.js Application
What is the proper way of adding external CSS file in Vue.js Application ? I found several ways to add CSS file in Vue.js Application. Some one suggest to use this one. <link rel=”stylesheet” type=”text/css” href=”/static/bootstrap.min.css”>. Some one suggest this one Some one suggest this one require(‘./assets/layout3/css/layout.min.css’) Some one suggest to use below code in webpack.config.js. Some one suggest to
How to share some code among components in Vue
I have component with code like that: I would like to share myValidator and response in order to doesn’t repeat that code in many components. But, probably, because of lack of knowledge in Javascript I have not idea how to do that. So any advice will be appreicate. Answer Vue.js is incredibly flexible. There are multiple options available. To share
Vuejs doesn’t render components inside HTML table elements
I want to render a custom component that displays a row inside a table. I have the following code: The problem is that the row ends up rendered outside the table! Like this: You can check it out in this JSFiddle https://jsfiddle.net/eciii/7v6yrf3x/ I’m not sure if this is a bug or I’m just missing something really obvious here… Answer See
How do I check keystroke on blur using vue?
It’s not stated clearly in vue documentation nor did I find any similar questions online so I’m asking it here. I need a vue text input to return what the last keystroke is. The method that was tied to the blur event contains a data object so I cannot capture the default event object. I tried using custom key functions
Vue – Loop through an array of objects, and highlight the selected item on click
I have an array of objects which holds data, which I output to the DOM using map. Each item in the list, has a @click event listener. When you click on one of the items, I want it to be highlighted by way of adding a css class, for example ‘hover’. So basically it should work like a menu system.
Failed to mount component: using vue-c3
I tried using https://www.npmjs.com/package/vue-c3 for rendering my c3 charts in vue. It worked some time ago, but now it started giving (in VueC3): “vue.runtime.esm.js?ff9b:587 [Vue warn]: Failed to mount component: template or render function not defined.” even when using a code from a tutorial: How can I fix this? Answer I faced the same exact problem. In my case it
Vue.js component parent event
im wondering why my code isn’t working. I have an event ‘leave’ which should be called on blur. The components are displayed properly but when i leave the inputs the event wont be triggered. Thanks for your help 🙂 Answer Your <text-input> component needs to forward (re-emit) the blur event from the inner <input> element: Then, <text-input>’s parent could receive
Vue warn: Unknown custom element: – did you register the component correctly?
I’m a freshman, when i use use custom components, it gives me this error: Vue warn: Unknown custom element: – did you register the component correctly? The ModalBase compontent used in the components NoticeModal.vue and NoticeModal compontent used in the productInfo.vue. I’m sure I had correctly import NoticeModal in productInfo.vue and also import ModalBase.vue in NoticeModal.vue, and all registerd. But