vue-component | 易学教程

$emit doesn't trigger child events

阅读更多关于 $emit doesn't trigger child events

问题 For a VueJS 2.0 project I have the following on the parent component <template> <child></child> <button @click="$emit('childEvent)"></button> </template> on the child component I have: { events: { 'childEvent' : function(){.... }, ready() { this.$on('childEvent',...) }, methods: { childEvent() {....} } } Nothing seems to work on button click. Is it that I need to create a parent method that would then emit to the child? I was using vuejs 1. but now I'm confused as to the ways parent to child

Vue.js: Import class with function and call it in child component

阅读更多关于 Vue.js: Import class with function and call it in child component

I have a component my-parent . In this component, I use a child component my-child and import an external class MyClass with an own function exportedFunction . I tried to use this solution: VueJS accessing externaly imported method in vue component Basiclly, I use mounted and the name of the function from the imported class. In methods I defined a new method, which calls the mounted one from the imported class. Than I pass the created method as property to my child, where I try to call the function with a @click and pass the parameter there. Here is my code so far: my-parent template:

Vue - best way to reuse methods

阅读更多关于 Vue - best way to reuse methods

问题 In vue 2 - what is correct practise for reusing vue methods? Instead of writing them in each component, what is the best way to make them global? 回答1: Mixin You can create a mixin for it Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. Example: // define a mixin object var myMixin = { created: function (

How can I run functions within a Vue data object?

阅读更多关于 How can I run functions within a Vue data object?

问题 So I am trying to use the following component within Vue JS: Vue.component('careers', { template: '<div>A custom component!</div>', data: function() { var careerData = []; client.getEntries() .then(function (entries) { // log the title for all the entries that have it entries.items.forEach(function (entry) { if(entry.fields.jobTitle) { careerData.push(entry); } }) }); return careerData; } }); The following code emits an error like so: [Vue warn]: data functions should return an object: https:

Stop receiving events from destroyed child component

阅读更多关于 Stop receiving events from destroyed child component

问题 I have a parent where I can dynamically add child components into. When child component is added in mount I register a listener for an event EventBus.$on('content-type-saving', function() { logic here... } Problem is when that component is deleted in the parent by removing it from the array of child components, that even still fires and code inside of it is run. How can I prevent this from happening? I tried this beforeDestroy() { //do something before destroying vue instance EventBus.$off(

How to modify the styling of a component from the parent?

阅读更多关于 How to modify the styling of a component from the parent?

问题 I need to modify some CSS properties of a Vue component, from its parent. It would override the CSS defined within the component. I first expected that for a component <my-component> , I could directly style it from the parent, like any other element: my-component { font-weight: bolder; } This does not work. The second solution I tried is to pass a prop to the component, with the relevant information to be used in the styling. This works but I am still hoping for a solution closer to an

How to fire an event on Vue switch change

阅读更多关于 How to fire an event on Vue switch change

问题 I have a Vue component that has a vue-switch element. When the component is loaded, the switch has to be set to ON or OFF depending on the data. This is currently happening within the 'mounted()' method. Then, when the switch is toggled, it needs to make an API call that will tell the database the new state. This is currently happening in the 'watch' method. The problem is that because I am 'watching' the switch, the API call runs when the data gets set on mount. So if it's set to ON and you

Vue.js - Calling a component's method from Vue instance

阅读更多关于 Vue.js - Calling a component's method from Vue instance

问题 I have a created a Vue instance and a global component. How can I call the component's method from my Vue instance? In my Vue instance I did this: methods: { handleTabClick: function(tab, event) { if (tab.name == 'log') { call loadLog function in log component } } } Then my component is defined as this: Vue.component('jettLog', { props: ['shop'], data() { return { log: [], logLoading : true } }, methods: { loadLog: function() { console.log("Load"); }, }, }); How can I call jettLog's function

vue component does not update when data is changed external

阅读更多关于 vue component does not update when data is changed external

问题 My component does not update the loaded property when Store.loaded changes: Component import { Vue } from 'vue-property-decorator' import Component from 'nuxt-class-component' import { Store } from '../repositories' @Component export default class Layout extends Vue { loaded = Store.loaded } Store class Root { loaded = false } export let Store = new Root() export default Store 回答1: In your example Store is just plain function (class), without any reactivity (no Vue watchers attached for Store

Validate form input fields in child component from a parent component with Vuelidate

阅读更多关于 Validate form input fields in child component from a parent component with Vuelidate

I am new to Vue Js and Vuelidate. Just tried to validate form input fields from a parent component like here: https://github.com/monterail/vuelidate/issues/333 Child component in the parent: <contact-list ref="contactList" :contacts="contacts" @primaryChanged="setPrimary" @remove="removeContact" @ready="isReady => readyToSubmit = isReady"/> The method in the child: computed: { ready() { return !this.$v.email.$invalid; } }, watch: { ready(val) { this.$emit('ready', val); } }, methods: { touch() { this.$v.email.$touch(); } } I'm calling the touch() method from the parent like so: submit() { this