vue-component

问题 See and example of this issue here. I have a <count-down> component that simply displays an timer (that updates every second, of course). If I have three such timers on the page all at the same time, they work as expected. However, if I have three that are displayed on the pages at different times (i.e. using v-if statements), the timers don't work as expected. The first timer works just fine, but the lifecycle hooks for subsequent timers never fire. I have a sneaky suspicion that Vue is

问题 I've got two problems here. The first is that I can't get the star rendered properly. I can do it if I change the value in the data() function but if I want to do it in a function callback way, it doesn't work (see comments below). What's going wrong here? Does it have something to do with Vue's lifecycle? The second one is that I want to submit the star-rate and the content of the textarea and when I refresh the page, the content should be rendered on the page and replace the <textarea><

问题 I have the following component <template> <b-input :value="value" @blur="validateEmail" ref="input" :state="state"/> </template> <script> export default { methods: { validateEmail: function() { console.log('test') }, } </script> The method validateEmail is not been triggered when input loses focus. 回答1: Change @blur to @change and it will work. 来源： https://stackoverflow.com/questions/53207177/bootstrap-vue-onblur-handler-is-not-been-called

问题 Help me please! I have two pages: Home , About and a component SecondPage . This component has two tables with data, and it should be displayed on About page. But when I navigate to About page, all data is cleared, and tables are empty. I tried to display all from About page as About component in my main page Home , and it works! So, props are passed correctly. Why all data from tables disappearing in About page when I click it? I tried .prevent , but it doesn't work as I expect. About.vue

问题 I have a vue.js app where there are several child components like this: <main-app> <child-component></child-component> <child-component></child-component> <child-component></child-component> ... </main> When the page is loaded, I can use ready hook to know that the components are done loading. Now, these components are filled using ajax data and they can be manually updated by clicking a button. I can get data from each child-component by using broadcast and dispatch methods. But I want to

问题 I'm trying to conditionally apply the class "xs10" to a v-flex which contains my menu, based on the dimensions of the current screen. I've so far got something like this: <v-flex v-bind:class="{ xs10: menuSmall}" fluid> ..data() { return { menuSmall: this.$vuetify.breakpoint.mdAndUp } } But it's not working. I'm new to Vue.js + Vuetify but I'm guessing it's because menuSmall is not being re-calculated and re-rendered on every screen resize. Do I need to put it into the 'mounted' life-cycle of

问题 I have method that calls ajax to my api and that response which returns I assigning it to an array. After that in template section with v-for I display data. It render only one time after I change something in data to display. After refresh it is not displaying anymore. No errors in console, and vue shows that array is filled with returned response. Template: <template> <div class="row"> <div class="col-12"> <h5 class="component-title">Game board</h5> <button v-for="number in board" v-bind

问题 I want to have 3 main parts in my webapp: App.vue - this page only has the <router-view> tag and some general configuration + it fetches an API every second ControlPanel.vue - this page visualizes some data that the App.vue page gets Profile.vue - this page visualizes some data that the App.vue page gets too Right now I set up my App.vue with the API call and it passes the data it receives to the two pages with props like the following example. As you can see when it gets mounted it starts a

问题 I would like to pass some properties from a parent to all of his children when those are transcluded (content distribution syntax). In this case, the parent doesen't know (as far as I know) his children, so I don't know how to proceed. More specificly, I want a way to write this : <my-parent prop1="foo" prop2="bar"> <my-children></my-children> <!-- Must know content of prop1 and prop2 --> <my-children></my-children> <!-- Must know content of prop1 and prop2 --> </my-parent> Instead of having

问题 I want to do the same as here but instead I want to use images.sample as parameter e.g props : ['images.sample'] , <template> <img :src="images.sample"> </template> <script> export default { data() { return { images: { sample: require('./assets/static/images/sample.jpg') } } } } </script> 回答1: Your child component should be like : <template> <img :src="url"> </template> <script> export default { name:'child-img', props:['url'], data() { return { } } } </script> the parent component should