vue-component

问题 in my component I am using VueStrap's modal like this: <template> <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... > ... </modal-window> ... </template> <script> ... methods: { keyHandler (event) { console.log(event); } },... </script> I want handle key press when that modal is opened and ensure submit modal when enter pressed or close modal when esc pressed. I added custom function keyHandler which is unfortunately never

问题 Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect) 回答1: It doesn't look like there is any provided option to change the transition effect in the Vue component itself. But, you can disable it by setting the transition css property to none for the .stepper-content elements. For example, you could create a no-transition class: .no-transition .stepper__content { transition: none; }

问题 I'll explain my issue in a more generalized way for the purpose of clear understanding and here is the jsFiddle I have two main routes which show two different components in the router-view Route-1 when clicked the path is: '/route-1' Route-2 when clicked the path is: '/route-2/sub-route-a' Route-2 contains a another router-view inside it which displays two sub routes that are: sub-route-a sub-route-b When Route-2 is clicked it opens the component of Route-2 with sub-route-a pre-opened in its

问题 I have set up a bare bones vue project to show the problem. The only thing I added was the axios package. The problem is when I try to set the property of child component after an asynchronous call I cant read that property in the component. If you look at the code you can see I console log several times to show when I can get the data and when I cant. Please help me figure out what im missing here. Parent <template> <div id="app"> <HelloWorld :test_prop="testData" :test_prop2="testData2"

问题 I have a Vue instance with two local components , when I try to get some data from server using axios the props because empty when try to pass it in the GET params var custom_erp_widget = new Vue({ el : '#custom-erp-widgets', data : { showContainerHeader : false, currentModuleName : 'foo', currentModuleFormID : '5', currentModuleReportID : '6' }, components : { 'custom-erp-header' : { template : '<div class="col-12" id="custom-erp-widget-header">'+ '{{ currentModuleName.toUpperCase() }}'+ '<

问题 I am using Advanced-Async-Components to load async component after loading of the app. So I have tried the following code: Index.vue <template> <div class=""> <Async></Async> </div> </template> <script> // async component import LoadComp from '@/components/Loading' import ErrorComp from '@/components/Error' const Async = () => ({ // The component to load. Should be a Promise component: import('@/components/Async'), // A component to use while the async component is loading loading: Load, // A

问题 I am using Advanced-Async-Components to load async component after loading of the app. So I have tried the following code: Index.vue <template> <div class=""> <Async></Async> </div> </template> <script> // async component import LoadComp from '@/components/Loading' import ErrorComp from '@/components/Error' const Async = () => ({ // The component to load. Should be a Promise component: import('@/components/Async'), // A component to use while the async component is loading loading: Load, // A

问题 If you have a vue component that is installed via Node : node_modules/vendor/somecomponent.vue Is there any way to modify/extend the template/methods of this component? Update: After trying out the example below, I'm facing this issue: I am using https://github.com/eliep/vue-avatar and I need to extend this with a prop, and maybe amend the template a bit. import {Avatar} from 'vue-avatar' Avatar = Vue.component('Avatar').extend({ props: ['nationality'] }); export default { components: {

问题 i'm building a app with Vuejs and using vue-router and vuex. i'm stuck now because, after the user login, my app redirect to dashboard, but if i refresh the page, he returns to login page again. to verify if user is logged, my app check the localstorage if have a access_token then he is redirected to router view "/" or not. this is my router folder and his files: src/router index.js: import Vue from 'vue' import VueRouter from 'vue-router' import {routes} from './routes' import beforeEach

问题 Is there a way with which I can control the rendering of a shared component in another component? I have a component which is a bottom bar which needs to be disabled/ not rendered in a few concrete components. I am rendering the bottom bar in a template which is being used by all the components. EDIT: I am using webpack 回答1: Use vue-router const Header = {template: '<div>component header</div>'} const Main = {template: '<div>component main</div>'} const Footer = {template: '<div>component