vue-component | 易学教程

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:{

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 } })

“$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

How can I make “vue build” spit out non-optimized JS files?

阅读更多关于 How can I make “vue build” spit out non-optimized JS files?

I want to write a single-page web UI using Flask (and Flask-RESTful) for a REST back-end, and Vue.js for the front-end. The problem is, I'm having a hard time using the two together during development. I can build Vue components using vue build --prod ... to obtain a JS file that I can serve as a static file using Flask's web server. This file, however, is optimized for production. Without --prod , vue build starts a web server directly, which means that if I start flask run , JS code is served from a different port than my REST backend, which makes it impossible to use (same origin policy).

Can Vue.js add commas while user typing numbers?

阅读更多关于 Can Vue.js add commas while user typing numbers?

I see this topic , But this is Jquery, how can I change it to Vue.js ? Is v-on supported in Vue.js? Where is my mistake? <div id="vue"> <input v-model="amountModel" v-on:keyup="AddCammas()" value="{{price}}"> </div> <script> el: #vue, methods:{ AddCammas : funtion(){ if(event.which >= 37 && event.which <= 40) return; $(this).val(function(index, value) { this.message = this.amountModel .replace(/\D/g, "") .replace(/\B(?=(\d{3})+(?!\d))/g, ","); }); } } </script> You don't need jQuery at all for this. You watch your variable, and in the watch function, compute the reformatted version, then set

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;

VueJS 2.0 Communicating from the Parent to the Child

阅读更多关于 VueJS 2.0 Communicating from the Parent to the Child

I'm sure there is a simple way to do this, but I can't figure it out. In my html file I have the following button: <button @click="showModal">Show Modal</button> Clicking that button runs the following method: new Vue({ el: '#root', methods: { showModal() { Event.$emit('showModal'); }, } }); What I want to happen when I click on that button is to toggle a class in a modal component. Here is the relevant code for the component: Vue.component('modal', { template: ` <div :class="[ modalClass, {'is-active' : isActive }]"> ETC... </div> ` data() { return { isActive: false, modalClass: 'modal' } } I

Vuex. How to render data from store using v-for

阅读更多关于 Vuex. How to render data from store using v-for

I have app with couple components. I use Vuex to store data so I could use it in different components. Now I need to render some divs using v-for. I do as follows: VueX/Modules/shows.js const state = { shows: [ { name: 'Hard Luck', venue: 'The Venue', time: '6:00 pm' }, { name: 'Hard Luck', venue: 'The Venue', time: '6:00 pm' } ] } export default { state } Component where I need to use data: <template> <div class="dashboard__details dashboard__details--shows" v-for="show in shows"> <h3 class="dashboard__name"> {{show.name}} @ {{show.venue}} </h3> <span class="dashboard__time">{{show.time}}<

Vue js combining the elements from two components

阅读更多关于 Vue js combining the elements from two components

问题 I am trying to build the checkout page of a e-commerce type of app. On the checkout I have a list of OrderItems coming from the database, each with price, quantity. You can pick and combine these. In addition I have to render somewhere else a list with "addons" to your basket. This are also OrderItems (same properties) but have a different type. I have a Vue.js component for rendering an array of OrderItems from which you can pick. The way I though of this is rendering the same component

How can I get the list value in a component?

阅读更多关于 How can I get the list value in a component?

For example, I have import a component named <pic-upload> in the template, like <template> <pic-upload></pic-upload> </template> export default { data: () => ({ show: { content: '', recommend: false, albums: [] } }), components: { picUpload }, methods: { submit: function () { dataService.postpic(this.show).then(() => { this.$toast({ message: 'success' }) }) } } } and in the <pic-upload> component, it returns data and a method like: // pic-upload component export default { data () { return { imgList: [] } }, methods: { getUploadedImgList () { return this.imgList } } } so how can I get the value