vuejs2

Access to a function\$refs in another component not in the same level as current one

由 杀马特。学长 韩版系。学妹 提交于 2021-02-10 15:52:06
问题 I've a Vue 2 application, with different components nested. Their structure is kinda (I'm skipping the not-relevant ones for my question): <root> <app> <component1/> ... <component3> <billingAddress> <customForm/> </billingAddress> <shippingAddress> <customForm/> </shippingAddress> </component3> ... <lastComponent/> </app> </root> The customForm1 and 2 contain a form, validated via vee-validate - so there' a ValidationObserver component. Those two forms are validated at the relative submit -

Access to a function\$refs in another component not in the same level as current one

由 |▌冷眼眸甩不掉的悲伤 提交于 2021-02-10 15:49:39
问题 I've a Vue 2 application, with different components nested. Their structure is kinda (I'm skipping the not-relevant ones for my question): <root> <app> <component1/> ... <component3> <billingAddress> <customForm/> </billingAddress> <shippingAddress> <customForm/> </shippingAddress> </component3> ... <lastComponent/> </app> </root> The customForm1 and 2 contain a form, validated via vee-validate - so there' a ValidationObserver component. Those two forms are validated at the relative submit -

Computed property not updating on props changes

由 ￣綄美尐妖づ 提交于 2021-02-10 15:39:15
问题 I can't get a computed property to update, when a nested property in a passed prop object is changed. this.favourite is passed via props, but the computed property is not updating when this.favourite.selectedChoices.second.id and this.favourite.selectedChoices.first.id is changed. Any ideas of how to make this reactive? Here's the computed property: isDisabled() { const hasMultipleChoices = this.favourite.choices.length ? this.favourite.choices[0].value.some(value => value.choices.length) :

How to test vue router beforeRouteUpdate navigation guard?

由 一笑奈何 提交于 2021-02-10 14:32:23
问题 First off, I'm using Vue-property-decorator. My component has a component route, defined like this. @Component({ components: { ComponentA, ComponentB }, beforeRouteUpdate (to, _from, next) { const { checkInDate, checkOutDate, items, currency, locale } = to.query; const queryFullfilled = !!checkInDate && !!checkOutDate && !!items.length && !!currency && !!locale; if ([BOOKING_PAGE, RESERVATION_PAGE].indexOf(to.name) > -1 && queryFullfilled) { this.validateRooms(); } next(); } }) export default

How to test vue router beforeRouteUpdate navigation guard?

由 旧时模样 提交于 2021-02-10 14:32:07
问题 First off, I'm using Vue-property-decorator. My component has a component route, defined like this. @Component({ components: { ComponentA, ComponentB }, beforeRouteUpdate (to, _from, next) { const { checkInDate, checkOutDate, items, currency, locale } = to.query; const queryFullfilled = !!checkInDate && !!checkOutDate && !!items.length && !!currency && !!locale; if ([BOOKING_PAGE, RESERVATION_PAGE].indexOf(to.name) > -1 && queryFullfilled) { this.validateRooms(); } next(); } }) export default

Read file inside current directory using Vue

由 可紊 提交于 2021-02-10 08:38:30
问题 I'm trying to get text file data located in the same directory where my .vue file is. But it's not returning the text on both chrome and firefox. Instead it's returning following response, which is not the content of my text file. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>router-project</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript" src

VueJs Custom currency mask

由 吃可爱长大的小学妹 提交于 2021-02-10 05:49:08
问题 My Currency mask has got some issues. When I am typing say 10000 in the field, it formats it as expected 10,000 but the moment i shift focus to another field or press tab. The mask shifts the comma position to the left by 1. i.e. 10,000 becomes 1,0000 You can check codepan for the issue, can anyone help me with this? https://codepen.io/veer3383/pen/BxqzLb?editors=1010# The template: <v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label

VueJS Mixins Methods Direct Call

由 走远了吗. 提交于 2021-02-10 04:11:49
问题 I'm testing Mixins on VueJS and I have a question. Is there a way to call an event directly from a Mixins without having to assign it in my methods ? MyMixins.js import Vue from 'vue' Vue.mixin({ methods: { Alerta(){ alert('WORK!') } } }) app.vue <template> <button v-on:click="AlertaInterno">test</button> </template> <script> export default{ methods:{ AlertaInterno(){ this.Alerta() } } } </script> The code above works. I was wondering how I could invoke the mixin function directly, something

VueJS Mixins Methods Direct Call

由 佐手、 提交于 2021-02-10 04:01:46
问题 I'm testing Mixins on VueJS and I have a question. Is there a way to call an event directly from a Mixins without having to assign it in my methods ? MyMixins.js import Vue from 'vue' Vue.mixin({ methods: { Alerta(){ alert('WORK!') } } }) app.vue <template> <button v-on:click="AlertaInterno">test</button> </template> <script> export default{ methods:{ AlertaInterno(){ this.Alerta() } } } </script> The code above works. I was wondering how I could invoke the mixin function directly, something

VueJS Mixins Methods Direct Call

由 泄露秘密 提交于 2021-02-10 04:01:06
问题 I'm testing Mixins on VueJS and I have a question. Is there a way to call an event directly from a Mixins without having to assign it in my methods ? MyMixins.js import Vue from 'vue' Vue.mixin({ methods: { Alerta(){ alert('WORK!') } } }) app.vue <template> <button v-on:click="AlertaInterno">test</button> </template> <script> export default{ methods:{ AlertaInterno(){ this.Alerta() } } } </script> The code above works. I was wondering how I could invoke the mixin function directly, something
订阅 vuejs2