The mouseover action cannot work; it cannot console.log the message when I mouseover
code
<template>
<div id="horrizontalNav">
<el-menu class="el-menu-demo" mode="horizontal" >
<el-menu-item index="1" #mouseover="showUp">find Music</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
showUp() {
console.log('succeed')
}
},
}
</script>
Since you are putting the event on a custom element, you have to use the native modifier:
<el-menu-item index="1" #mouseover.native="showUp">find Music</el-menu-item>
see more here: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components
Related
I have a parent component that has numerous containers. Each container has an image and some buttons.
I have over simplified the parent and child components below. When a button is clicked that is within the child component, I would like to toggle the class on an element that is in the parent container. I would like to effect each image individually, not globally. How do I do this?
parent:
<template>
<div>
<div :class="{ active: mock }">
<img src="/path">
</div>
<toggleButtons/>
</div>
<div>
<div :class="{ active: mock }">
<img src="/path">
</div>
<toggleButtons/>
</div>
</template>
<script>
import toggleButtons from './toggleButtons'
export default {
name: "parent",
components: {
toggleButtons
}
};
</script>
child:
<template>
<div class="switch-type">
<a #click="mock = false">Proto</a>
<a #click="mock = true">Mock</a>
</div>
</template>
<script>
export default {
name: "toggleButtons",
data() {
return {
mock: false
}
}
};
</script>
Oversimplified example of how you can pass data from child to parent:
Child:
<a #click="$emit('mockUpdated', false)">Proto</a>
<a #click="$emit('mockUpdated', true)">Mock</a>
Parent (template):
<toggleButtons #mockUpdated="doSomething" />
Parent(methods):
doSomething(value) {
// value will be equal to the second argument you provided to $emit in child
}
EDIT: (toggling the class for each individual container):
I would probably create a new component for the container (container.vue), pass a path as a prop :
<template>
<div>
<div :class="{ active: mock }">
<img :src="path">
</div>
<toggleButtons #mockUpdated="doSomething" />
</div>
</template>
<script>
export default {
props: {
path: String,
},
data() {
return {
mock: false
}
},
methods: {
doSomething(value) {
this.mock = value;
}
}
}
</script>
and then in Parent.vue, you can import the container component and use it like:
<template>
<Container path="/path-to-file.jpg" />
<Container path="/path-to-file.jpg" />
</template>
There is nothing to do with slots in your case. You need "emit event" to parent from button, and pass mock data to update img states. Slot is a very different thing. There are multiple ways to achive your goal. One way can be something like this:
parent
<AppImage v-for="img in imageData" :key="img.id" :image="img"/>
data() {
iamges: ["yourPath1", "yourPath2"]
},
computed: {
imageData() {
// adding ID is almost always a good idea while creating Vue apps.
return this.images.map(x => {
id: Math.floor(Math.random() * 1000),
path: x
})
}
}
Image.vue
<img :path="image.path" :class={ active: mock} />
<toggleButtons #toggled=changeImageState />
props: [image],
data() {
mock: ''
},
methods: {
changeImageState(event) {
this.mock = event
}
}
ToggleButtons.vue
<a #click="toggleMock(false)">Proto</a>
<a #click="toggleMock(true)">Mock</a>
emits: ['toggled']
methods: {
toggleMock(val) {
this.$emits('toggled', val)
}
}
Please read the code and let me know if you have any question.
I have in Layout.vue to components one TheSidebar second TheHeader, there is a button in TheHeader to open the sidebar in TheSidebarcomponent.
I need to when I click the button in header open the sidebar:
My try:
in TheHeader:
methods: {
openSidebar() {
this.$root.$emit("open-sidebar");
},
},
in TheSidebar
data() {
return {
sidebarOpen: false,
};
},
mounted() {
this.$root.$on("open-sidebar", (this.sidebarOpen = true));
},
I'm using VUE 3 so I got this error in console: TypeError: this.$root.$on is not a function so How can communicate ?
you can use something like tiny emitter it works fine and doesn't care about parent child relationship
var emitter = require('tiny-emitter/instance');
emitter.on('open-sidebar', ({isOpen}) => {
//
});
emitter.emit('open-sidebar', {isOpen : true} );
You can only pass props to a direct child component, and
you can only emit an event to a direct parent. But
you can provide and eject from anywhere to anywhere
Per another answer, provide and eject may be your best bet in Vue 3, but I created a simple example of how to implement with props/events. Built with Vue 2 as I haven't worked with 3 yet, but should be usable in Vue 3 as well.
Parent.vue
<template>
<div class="parent">
<div class="row">
<div class="col-md-6">
<h4>Parent</h4>
<hr>
<child-one #show-child-two-event="handleShowChildTwoEvent" />
<hr>
<child-two v-if="showChildTwo" />
</div>
</div>
</div>
</template>
<script>
import ChildOne from './ChildOne.vue'
import ChildTwo from './ChildTwo.vue'
export default {
components: {
ChildOne,
ChildTwo
},
data() {
return {
showChildTwo: false
}
},
methods: {
handleShowChildTwoEvent() {
this.showChildTwo = true;
}
}
}
</script>
ChildOne.vue
<template>
<div class="child-one">
<h4>Child One</h4>
<button class="btn btn-secondary" #click="showChildTwo">Show Child Two</button>
</div>
</template>
<script>
export default {
methods: {
showChildTwo() {
this.$emit('show-child-two-event');
}
}
}
</script>
ChildTwo.vue
<template>
<div class="child-two">
<h4>Child Two</h4>
</div>
</template>
I stared from scratch with my notepad app, found here: Issues with data bind in vue.js and events
The issue was I can not seem to click on the note from NoteList.vue to see the details, there is a disconnect somewhere with my bind, and the event handler doesn't seem to work it is throwing an unhandled error: [Vue warn]: Unhandled error during execution of native event handler at <NoteList key=1 note={id: 1, title: "Note one title", body: "This is note ones body content"} > at
Here is my code:
App.vue
<template>
<div class="body">
<div class="notepad-container h-75 w-75">
<header class="header d-flex justify-content-center align-items-center">
<h4>Light Notepad v1</h4>
</header>
<section class="notepad-content">
<note-list
v-for="note in notes"
:key="note.id"
:note="note"
></note-list>
<!-- <add-note-button></add-note-button> -->
</section>
<section class="notepad-editor">
<!-- <save-button></save-button> -->
</section>
<section class="show-note"
v-if="readingNote" === true">
<show-note
#open-note="readNote"
v-for="note in notes"
:key="note.id"
:note="note"
></show-note>
</section>
</div>
</div>
</template>
<script>
// import AddNoteButton from "./components/AddNoteButton.vue";
import NoteList from "./components/NoteList.vue";
// import SaveButton from "./components/SaveButton.vue";
import ShowNote from "./components/ShowNote.vue";
export default {
components: {
NoteList,
// AddNoteButton,
// SaveButton,
ShowNote
},
data() {
return {
readingNote: false,
notes: [
{
id: 1,
title: "Note one title",
body: "This is note ones body content"
},
{
id: 2,
title: "Note two title",
body: "This is the second notes body content"
}
],
methods: {
readNote() {
this.readingNote = !this.readingNote;
}
}
};
},
};
</script>
NoteList.vue
<template>
<div>
<p #click="openNote">{{ note.title }}</p>
<hr />
</div>
</template>
<script>
export default {
emits: ["open-note"],
props: {
note: {}
},
method: {
openNote() {
this.$emit("open-note");
console.log("note opened!");
}
}
};
</script>
ShowNote.vue
<template>
<div>note details: {{ note.body }}</div>
</template>
<script>
export default {
props: {
note: {}
}
};
</script>
I figured it out, I had method, not methods, I was missing the 's' from methods, now I am able to see the consol.log message, still working on seeing the note detail. One step closer!
Maybe adding one more: I just encountered this when I added Vuex's ...mapActions into computed property in Vue component. ...mapActions belongs to methods.
WRONG:
computed: {
...mapGetters('AppStore', ['navigation', 'isNavigationCollapsed']),
...mapActions('AppStore', ['toggleNavigation'])
}
CORRECT:
computed: {
...mapGetters('AppStore', ['navigation', 'isNavigationCollapsed'])
},
methods: {
...mapActions('AppStore', ['toggleNavigation'])
}
I want to add #change event on custom input component.
This is my component:
<template>
<div class="w-100">
<div class="form-text">
<input
:value="value"
#input="updateValue($event.target.value)"
autocomplete="off"
class="form-text__input"
/>
</div>
</div>
</template>
<script>
export default {
name: 'FormText',
props: {
value: {
required: true,
type: String
}
},
methods: {
updateValue(value) {
this.$emit('input', value)
}
}
}
</script>
and this is how I use it:
<form-text
v-model="form.placeOfBirth"
/>
I want to add #change event. This event should fire when user start typing in input, not when data came from API and input were filled.
in the template:
<input
...
#keyup="onKeyUp"
/>
in the code:
methods: {
onKeyUp(event) {
this.$emit('change', event)
}
}
Please pay attention that this event will be fired after every pressed key.
Using Vue Multiselect, I am trying to send a console.log once I have made a selection. I thought it would work by putting it in the watch but it does not work. Where should it be placed. Please see my component below.
Component
<template>
<div>
<label v-for="topic in topics" class="radio-inline radio-thumbnail" style="background-image: url('http://s3.hubsrv.com/trendsideas.com/profiles/74046767539/photo/3941785781469144249_690x460.jpg')">
<input type="radio" v-model="internalValue" name="topics_radio" :id="topic.id" :value="topic.name">
<span class="white-color lg-text font-regular text-center text-capitalize">{{ topic.name }}</span>
</label>
</div>
</template>
<script>
export default {
props: ['value'],
data () {
return {
internalValue: this.value,
topics: []
}
},
mounted(){
axios.get('/vuetopics').then(response => this.topics = response.data);
},
watch: {
internalValue(v){
this.$emit('input', v);
console.log('topic has been chosen!!!');
}
}
}
</script>
It fires events, so you may catch them.
<multiselect ... #select="doSomething" ...>
Then add your method
...
methods: {
doSomething(selectedOption, id) {
console.log(selectedOption);
}
}
Make sure you implemented vue-multiselect correctly, I don't see the component in your code.