vue-component

I'm trying to add a simple date-picker to a custom vue component. I'm not using webpack so I want to avoid ready made .vue components and I rather understand how to add simple javascript to vue. I'm following this official vue tutorial I've also seen this codepen but I can't manage to make the date picker appear. This is my jsfiddle : Html: <div class="app"> <datepicker id='date-elem'></datepicker> </div> app.js: Vue.component('date-picker', { extends: Flatpickr, mounted () { this.Flatpickr(date-elem, {})} }) How can I easily integrate vanilla js in a Vue component without the need of .vue

I have the following component with a slot: <template> <div> <h2>{{ someProp }}</h2> <slot></slot> </div> </template> For some reasons, I have to manually instantiate this component. This is how I am doing it: const Constr = Vue.extend(MyComponent); const instance = new Constr({ propsData: { someProp: 'My Heading' } }).$mount(body); The problem is: I am not able to create slot contents programmatically. So far, I can create simple string based slot: const Constr = Vue.extend(MyComponent); const instance = new Constr({ propsData: { someProp: 'My Heading' } }); // Creating simple slot instance.

I have event that is generated in parent component and child has to react to it. I know that this is not recommended approach in vuejs2 and i have to do a $root emit which is pretty bad. So my code is this. <template> <search></search> <table class="table table-condensed table-hover table-striped" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> <tbody id="trans-table"> <tr v-for="transaction in transactions" v-model="transactions"> <td v-for="item in transaction" v-html="item"></td> </tr> </tbody> </table> </template> <script> import Search from '.

I trying to make this custom radio button component to work in vuejs. How do I make the radio button checked with a value from parent component. I know you use v-model and set it to a same value in one of the input values, but it dont seem to get it work. component: export default Vue.component('radioButton', { template, props: ['name', 'label', 'id', 'value'] }) component template: <label class="radio" :for="id"> <input type="radio" :id="id" class="radio-button" :value="value" :name="name"> <span class="radio-circle"> </span> <span class="radio-circle__inner"> </span> <span class="radio

I want to bind a custom attribute to an option select menu. The <option> tag would simply have an attribute of selected="selected" <template> <div> <select> <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> </select> </div> </template> data: { selected: "selected", notSelected: "" } This does not work, but if I change v-bind:selected to v-bind:class then it receives the appropriate class, so the logic is working, but not with the selected attribute. Any way to make it work with such custom attributes? You can just use v-model for

I have a component with the following hash { computed: { isUserID: { get: function(){ return this.userId? } } } Should I be watching isUserID or userId for changes? Can you watch computed properties? Saurabh Yes, you can setup watcher on computed property, see the fiddle . Following is the code to set watch on computed property: const demo = new Vue({ el: '#demo', data() { return { age: '' }; }, computed: { doubleAge() { return 2 * this.age; } }, watch: { doubleAge(newValue) { alert(`yes, computed property changed: ${newValue}`); } } }); David William computed: { name: { get: function(){

I'm developing a website with vuejs and at this moment I'm in a trouble, I need get the url query (page) from a url like this websitename.com/user/?page=1 but the this.$router.query.page get me a error (Uncaught TypeError: Cannot read property 'page' of undefined) someone know something about this problem and can help me? PS: I can set the query page using this.$router.push({name: 'userIndex', query: { page: '123' } }); and I can get the url normal params like the userID -> (websitename.com/user/:userId | websitename.com/user/1) but I can't get any query parameter I think you can simple call

I was going through this answer on SO : Is there a proper way of resetting a component's initial data in vuejs? However, the current method is not allowed now and VueJS prohibits changing the $data var. As you can see here in this https://github.com/vuejs/vue/issues/2873 ( $data is not allowed to be modified. ) So if I try the above method, I am getting a VueJS warning: [Vue warn]: Avoid replacing instance root $data. Use nested data properties instead. Here is my JS code, function initialState () { return { h2: 0, ch4: 0, c2h6: 0, c2h4: 0, c2h2: 0, c3h8: 0, c3h6: 0, co: 0, co2: 0, o2: 0, n2:

In a Vue 2.0 app, let's say we have components A, B and C. A declares, registers and uses B Is it possible to pass C from A to B? Something like this: <template> <div class="A"> <B :child_component="C" /> </div> </template> And use C in B somehow. <template> <div class="B"> <C>Something else</C> </div> </template> The motivation: I want to create a generic component B that is used in A but receives from A its child C . Actually A will use B several times passing different 'C's to it. If this approach is not correct, what is the proper way of doing it in Vue? Answering @Saurabh Instead of