vue-component | 易学教程

Working hours selection?

阅读更多关于 Working hours selection?

A reference to another question saw in the stack overflow. I checked for a solution like this but haven't succeeded yet. <div class="form-group"> <label>Working Hours :</label> <div v-for="value in day" class="checkboxFour"<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;"> <p>FROM</p> <label for="need" style=" width: 20%!important;">{{value.name}}</label> <input id="value.from" type="time" v-model="value.from" name="value.from" style="width: 30%!important;"> <p>TO</p> <input id="value.to" type="time" v-model="value.to" name="value.to"

How to define css styles for a vue.js component when registering that component?

阅读更多关于 How to define css styles for a vue.js component when registering that component?

I am able to register a custom vue.js component with // register Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>' }) Also see https://vuejs.org/v2/guide/components.html How can I include css classes for my component? I would expect something like Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>', css: '#... my css stylesheet...' }) but there does not seem to be a css option. I know that I could a) define all css classes in a global css stylesheet or b) use singe-file-vue-components (would require build tool

how to emit a value with a click event in vue.js

阅读更多关于 how to emit a value with a click event in vue.js

I am following Vuejs documentation and trying to emit a value with click event. The code follows: Vue Template: <div id="app"> <div class="container"> <div class="col-lg-offset-4 col-lg-4"> <sidebar v-on:incrementBtn="increment += $event"></sidebar> <p>{{ increment }}</p> </div> </div> </div> Vue instances: Vue.component('sidebar',{ template:` <div> <button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)">Increment on click</button> </div> `, }); new Vue ({ el:'#app', data:{ increment:0 } }); Sphinx Check Vue Custom Event , Vue always recommends using kebab-case for event names. And

“$attrs is readonly”,“$listeners is readonly”,“Avoid mutating a prop directly”

阅读更多关于 “$attrs is readonly”,“$listeners is readonly”,“Avoid mutating a prop directly”

I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample. <div class="chat-container clearfix" id="chat"> <div class="people-list" id="people-list"> <chatlist-component></chatlist-component> </div> <div class="chat"> <router-view></router-view> </div> </div> chat list component will load friend list from the server. Here is my app.js file; Vue.use(VueRouter) const router = new VueRouter

Vuejs toggle div visibility on checkbox selection

阅读更多关于 Vuejs toggle div visibility on checkbox selection

I am trying to toggle the visibility of a container div using Vuejs I have tried two methods as per below but neither have any affect on visibility of the container. Method 1: <body> <div class="checkbox" id = "selector"> <label><input type="checkbox" v-model="checked">Options</label> </div> <div class="container" id="app-container" v-if="checked"> <p>Text is visible</p> </div> <script src="path_to_/vue.js"></script> <script> var app = new Vue({ el: '#selector', data: { "checked": false } }) </script> </body> I know Vue.js loads OK, ticking the checkbox has no effect on text visibility. Method

Vue Single File Component binding data-v-xxxxxxxx to generated elements

阅读更多关于 Vue Single File Component binding data-v-xxxxxxxx to generated elements

I'm building a Vue component as a Single File Component: <template> <div class="chart"></div> </template> <script> import * as d3 from 'd3'; export default { data() { return { data: [4, 8, 15, 16, 23, 42], }; }, mounted() { d3.select('.chart') .selectAll('div') .data(this.data) .enter() .append('div') .style('width', d => `${10 * d}px`) .text(d => d); }, }; </script> <style lang="scss" scoped> .chart { div { background-color: steelblue; color: white; font: 10px sans-serif; margin: 1px; padding: 3px; text-align: right; } } </style> After processing with webpack, the CSS is rendered like so:

Component `mounted` fires twice on page load

阅读更多关于 Component `mounted` fires twice on page load

问题 I have a very weird error where on page load a components mounted and beforeMount fire/run twice? Each of my components represents a page, so when I load the page on mywebsite.com/contact the Contact.vue functions mounted and beforeMount fire/run twice but if I load the page on mywebsite.com/foo the Contact.vue functions mounted and beforeMount fire/run once (which is what I think? should happen). Any idea why these functions would execute twice? I have a bit of finicky setup but it work

Fetch all users and display them with vue js

阅读更多关于 Fetch all users and display them with vue js

I am very new to Vue js and I am now trying to output all the users in a table by fetching them with an ajax call. I get the users with no issue but then when I try to set the data.user with the new data I get an error saying the property or method users is not defined. This is my user list components: <template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">List of users</div> <div class="panel-body"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> <

Vue ignore custom component tag

阅读更多关于 Vue ignore custom component tag

问题 On my site I am using Google CSE (custom search engine by google). Here is my HTML: <div id="app"> ... <gcse:search></gcse:search> ... </div> <script type="text/javascript"> new Vue({ el: '#app' }) </script> As you can see, I have a "gcse input" placed inside of my vue application. Therefore I am getting a warning: [Vue warn]: Unknown custom element: <gcse:search> So my question is how it possible to stop attempting to initialize this custom component in Vue.js? Thanks in advance. 回答1: Vue

Multiple modal components with Vue

阅读更多关于 Multiple modal components with Vue

I am having trouble implementing dynamic modal component in Vue. A common approach I follow to display a set of data fetched from the db is I dump each of the rows in an HTML table element by iterating over each of the row of the db result. Something like this: As you can see in the screenshot, each of the rows has one or more buttons which are dynamically generated by the loop. In order to bind a modal component to each of the buttons (say the Remove buttons in this scenario) I do something like this. HTML: <div id="app"> <?php foreach($result as $x): ?> <modal v-if="showModal">I am Modal $x<