Vue.js getting an element within a component
vuejs 2 v-el:el:uniquename has been replaced by ref=”uniqueName”. The element is then accessed through this.$refs.uniqueName.
vue.js
How to solve ‘Redirect has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header’?
In addition to what awd mentioned about getting the person responsible for the server to reconfigure (an impractical solution for local development) I use a change-origin chrome plugin like this: Moesif Orign & CORS Changer You can make your local dev server (ex: localhost:8080) to appear to be coming from 172.16.1.157:8002 or any other domain.
Which command do I use to generate the build of a Vue app?
I think you’ve created your project like this: vue init webpack myproject Well, now you can run npm run build Copy index.html and /dist/ folder into your website root directory. Done.
How to reference static assets within vue javascript
For anyone looking to refer images from template, You can refer images directly using ‘@’ Example: <img src=”https://stackoverflow.com/questions/47313165/@/assets/images/home.png”/>
Mouseover or hover vue.js
i feel above logics for hover is incorrect. it just inverse when mouse hovers. i have used below code. it seems to work perfectly alright. <div @mouseover=”upHere = true” @mouseleave=”upHere = false” > <h2> Something Something </h2> <some-component v-show=”upHere”></some-component> </div> on vue instance data: { upHere: false } Hope that helps
Communication between sibling components in Vue.js 2.0
You can even make it shorter and use the root Vue instance as the global Event Hub: Component 1: this.$root.$emit(‘eventing’, data); Component 2: mounted() { this.$root.$on(‘eventing’, data => { console.log(data); }); }
Handling Enter Key in Vue.js
In vue 2, You can catch enter event with v-on:keyup.enter check the documentation: https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers I leave a very simple example: var vm = new Vue({ el: ‘#app’, data: {msg: ”}, methods: { onEnter: function() { this.msg = ‘on enter event’; } } }); <script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script> <div id=”app”> <input v-on:keyup.enter=”onEnter” /> <h1>{{ msg }}</h1> </div> Good … Read more
Can vue-router open a link in a new tab?
I think that you can do something like this: let routeData = this.$router.resolve({name: ‘routeName’, query: {data: “someData”}}); window.open(routeData.href, ‘_blank’); It worked for me.
Vue.js get selected option on @change
Use v-model to bind the value of selected option’s value. Here is an example. <select name=”LeaveType” @change=”onChange($event)” class=”form-control” v-model=”key”> <option value=”1″>Annual Leave/ Off-Day</option> <option value=”2″>On Demand Leave</option> </select> <script> var vm = new Vue({ data: { key: “” }, methods: { onChange(event) { console.log(event.target.value) } } } </script> More reference can been seen from here.
Vue.js dynamic images not working
I got this working by following code getImgUrl(pet) { var images = require.context(‘../assets/’, false, /\.png$/) return images(‘./’ + pet + “.png”) } and in HTML: <div class=”col-lg-2″ v-for=”pic in pics”> <img :src=”https://stackoverflow.com/questions/40491506/getImgUrl(pic)” v-bind:alt=”pic”> </div> But not sure why my earlier approach did not work.