I am a newbie to Vue.js. I am trying to emit an event from my grand-child component (card) to child component (hand) and from hand to parent component (main):
card(emit play event) => hand(listen to play event and emit
card-play event) => main(listen to card-play event)
play event should trigger card-play event
In card component, I am emitting "play" event when the card is clicked, then in my hand component I am listening to "play" event so that I can emit "card-play" event to the parent (main). But neither events are emitted nor elements are working (button element is disabled).
If I call card component in my main component directly everything is working fine, but when I try to put another component (hand) between them nothing is working.
Here is my code:
new Vue({
name: 'game',
el: '#app',
data: state,
template: `
<div id="#app">
<card :def="testCard" #click.native="handlePlay2" />
<transition name='hand'>
<hand :cards="testHand" v-if="!activeOverlay" #card-play="testPlayCard" />
</transition>
</div>
`,
methods: {
testPlayCard(card) {
console.log('You played a card!');
},
handlePlay2() {
console.log('You played a card!');
}
},
created() {
this.testHand = this.createTestHand();
},
computed: {
testCard () {
return cards.archers
},
}
});
Here are components:
/* ----- CARD COMPONENT ----- */
Vue.component('card', {
props: ['def'],
template: `
<div class="card" :class="'type-' + def.type" v-on:click.native="firePlayEvent">
<div class="title">{{ def.title }}</div>
<img class="separator" src="svg/card-separator.svg" />
<div class="description">
<div v-html="def.description"></div>
</div>
<div class="note" v-if="def.note">
<div v-html="def.note"></div>
</div>
<button>bos</button>
</div>
`,
methods: {
firePlayEvent: function() {
this.$emit('play');
console.log("play event is emitted???")
}
},
});
/* ----- HAND COMPONENT ----- */
Vue.component('hand', {
props: ['cards'],
template: `
<div class="hand">
<div class="wrapper">
<!-- Cards -->
<card v-for="card in cards" :key="card.uid" :def="card.def" #play=handlePlay(card) />
</div>
</div>
`,
methods: {
handlePlay(card) {
this.$emit('card-play', card);
console.log("custom event card-play>>");
}
},
});
I am keeping all data in state.js:
// Some usefull variables
var maxHealth = 10
var maxFood = 10
var handSize = 5
var cardUid = 0
var currentPlayingCard = null
// The consolidated state of our app
var state = {
// World
worldRatio: getWorldRatio(),
// TODO Other things
turn: 1,
//
players: [
{ name : 'Humoyun' },
{ name : 'Jamshid' },
],
//
currentPlayerIndex: Math.round(Math.random()),
//
testHand: [],
//
activeOverlay: null,
//
}
given your github link, here is what I did to make it work:
First, there is an element in your CSS that disallow click event on a card. So, to trigger correctly the event, you need to remove the pointer-events: none, line 239 of your css file.
Then, you don't need the .native event modifier on the click on your card:
<div class="card" :class="'type-' + def.type" #click="firePlayEvent">
When those two updates are made, on click on a card, the console shows the following:
custom event card-play>>
ui.js:43 play event is emitted???
And the card is removed as needed.
Related
When on button click I want to refresh list of items.
Button is trigger on a sibling component.
Watch method only gets called once. But I need a constant refresh
Parent element.
<template>
<div class="container">
<Filter #changedKeywords="reloadItems"></Filter>
<List :platforms="platforms" :filters="keywords"></List>
</div>
</template>
<script>
imports...
export default {
name: "Holder",
components: {Filter, List},
methods: {
reloadItems: function (data){
if(data.keywords) {this.keywords = data.keywords};
}
},
data(){
return {
keywords : null,
}
}
}
</script>
I want to redraw child this element multiple times, on each (filter)button click
<template>
<section class="list">
<div class="container">
<div class="holder">
<Game v-for="data in list" :key="data.id" :data="data" />
</div>
</div>
</section>
</template>
<script>
import Game from "./Game";
export default {
name: "List",
props: ['filters', 'platforms'],
components: {Game},
data() {
return{
list: [],
}
},
watch: {
filters: async function() {
console.log('gets called only once!!!'); // this is where I want to fetch new items
const res = await fetch('/api/game/list/9', {
method: 'POST',
body: JSON.stringify({'filters' : this.filters})
});
this.list = await res.json();
}
},
}
</script>
When you're watching objects and arrays you need to use a deep watcher.
The Solution
watch: {
filter: {
deep: true,
async handler(next, previous) {
//your code here
}
}
}
The Reason
Javascript primitives are stored by value, but Objects (including Arrays which are a special kind of Object) are stored by reference. Changing the contents of an Object doesn't change the reference, and the reference is what is being watched. Going from null to some object reference is an observable change, but subsequent changes aren't. When you use a deep watcher it will detect nested changes.
So while I'm learning vue, I wanted to double check if someone can show me what I'm doing wrong or lead me in the right answer. Below, I will show the code and then explain what I'm attempting to do.
Here is my Vue.js app:
Vue.component('o365_apps_notifications', {
template:
`
<div class="notification is-success is-light">
// Call the name here and if added/removed.
</div>
`,
});
new Vue({
name: 'o365-edit-modal',
el: '#o365-modal-edit',
components: 'o365_apps_notifications',
data() {
return {
list: {},
movable: true,
editable: true,
isDragging: false,
delayedDragging: false,
options: {
group: 'o365apps',
disabled: true,
handle: '.o365_app_handle',
}
}
},
methods: {
add(index, obj) {
console.log(obj.name);
this.$data.list.selected.push(...this.$data.list.available.splice(index, 1));
this.changed();
},
remove(index, obj) {
console.log(obj.name);
this.$data.list.available.push(...this.$data.list.selected.splice(index, 1));
this.changed();
},
checkMove(evt) {
console.log(evt.draggedContext.element.name);
},
},
});
Here is my modal:
<div id="o365-modal-edit" class="modal">
<div class="modal-background"></div>
<div class="modal-card px-4">
<header class="modal-card-head">
<p class="modal-card-title">Applications</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="container">
<div id="o365-modal-edit-wrapper">
<div class="columns">
<div class="column is-half-desktop is-full-mobile buttons">
// Empty
</div>
<div class="column is-half-desktop is-full-mobile buttons">
// Empty
</div>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<o365-apps-notifications></o365-apps-notifications>
</footer>
</div>
</div>
Here is what I'm attempting to do:
Inside my modal, I have my o365_apps_notifications html tag called, my add() and remove() methods output a name on each add/remove using console.log(obj.name); and my checkMove method also drags the same name on drag as shown below:
How could I get my component to render and output the name inside the modal footer? I've tried all methods, but I can't seem to figure out how to trigger the component.
Also, would I have to do something special to make the component fade out after a set timeframe?
All help is appreciated!
A couple issues:
You've declared the notification component with underscores (o365_apps_notifications), but used hyphens in the modal's template. They should be consistent (the convention is hyphens).
The notification component is declared globally (with Vue.component), but it looks like you're trying to add it to the modal's components, which is intended for local components. Only one registration is needed (the global component registration should do).
<o365-apps-notifications>
The notification component should have public props that take the item name and state:
Vue.component('o365-apps-notifications', {
props: {
item: String,
isAdded: Boolean
},
})
Then, its template could use data binding to display these props.
Vue.component('o365-apps-notifications', {
template:
`<div>
{{ item }} {{ isAdded ? 'added' : 'removed '}}
</div>`
})
For the fade transition, we want to conditionally render this data based on a local Boolean data property (e.g., named show):
Vue.component('o365-apps-notifications', {
template:
`<div v-if="show">
...
</div>`,
data() {
return {
show: false
}
}
})
...and add the <transition> element along with CSS to style the fade:
Vue.component('o365-apps-notifications', {
template:
`<transition name="fade">
<div v-if="show">
...
</div>
</transition>`,
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
To automatically fade out the data, add a watch on item, which sets show=true and then show=false after a delay:
Vue.component('o365-apps-notifications', {
watch: {
item(item) {
if (!item) {
return;
}
this.show = true;
clearTimeout(this._timer);
this._timer = setTimeout(() => this.show = false, 1000);
}
}
})
Usage
In the modal component, declare local data properties that hold the currently added/removed item:
new Vue({
el: '#o365-modal-edit',
data() {
return {
changedItem: null,
changedItemIsAdded: false,
}
},
})
Also update add() and remove() to set these properties:
new Vue({
methods: {
add(index, obj) {
this.changedItem = obj.name;
this.changedItemIsAdded = true;
},
remove(index, obj) {
this.changedItem = obj.name;
this.changedItemIsAdded = false;
},
},
})
Then in the modal component's template, bind these properties to the notification component's props:
<o365-apps-notifications :item="changedItem" :is-added="changedItemIsAdded"></o365-apps-notifications>
demo
I am very new to vue.js and fumbling my way though it, forgive me if my terms are incorrect. I am creating a touchscreen application that needs to be ADA compliant (only the bottom part of the screen is accessible, so i have to use buttons for interaction).
I have a parent component with a carousel creating an array of slides, pulling data from my child component.
parent component HTML
<carousel :navigateTo="selectedListIndex" #pageChange="OnPageChange">
<slide v-for="(member, index) in selectedList" :key="index">
<MemberBioPage :member="member"/>
</slide>
</carousel>
parent component SCRIPT:
export default {
data () {
return {
currentPage: 0
}
},
components: {
MemberBioPage,
Carousel,
Slide
},
computed: {
selectedList () {
return this.$store.state.selectedList
},
selectedListIndex () {
return this.$store.state.selectedListIndex
}
},
methods: {
OnPageChange (newPageIndex) {
console.log(newPageIndex)
this.currentPage = newPageIndex
}
}
}
within my child component, i have bio copy being pulled from my data and arrow buttons that allow you to scroll the text. There is an outer container and an inner container to allow the scrolling and based on the height that the content takes up in the container will determine when the arrows disable or not.
child component HTML:
<div class="member-bio-page">
<div class="bio">
<div class="portrait-image">
<img :src="member.imgSrc" />
</div>
<div class="bio-container">
<div class="inner-scroll" v-bind:style="{top: scrollVar + 'px'}">
<h1>{{ member.name }}</h1>
<div class="description-container">
<div class="para">
<p v-html="member.shortBio"></p>
</div>
</div>
</div>
</div>
<div class="scroll-buttons">
<div>
<!-- set the class of active is the scroll variable is less than 0-->
<img class="btn-scroll" v-bind:class="{ 'active': scrollVar < 0 }" #click="scrollUp" src="#/assets/arrow-up.png">
</div>
<div>
<!-- set the class of active is the scroll variable is greater than the height of the scrollable inner container-->
<img class="btn-scroll" v-bind:class="{ 'active': scrollVar > newHeight }" #click="scrollDown" src="#/assets/arrow-down.png">
</div>
</div>
</div>
</div>
child component SCRIPT:
<script>
export default {
props: [
'member', 'currentPage'
],
data () {
return {
scrollVar: 0,
outerHeight: 0,
innerHeight: 0,
newHeight: -10
}
},
mounted () {
this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
this.newHeight = this.outerHeight - this.innerHeight
return this.newHeight
},
methods: {
scrollUp () {
console.log(this.scrollVar)
this.scrollVar += 40
},
scrollDown () {
console.log(this.scrollVar)
this.scrollVar -= 40
},
showVideo () {
this.$emit('showContent')
}
}
}
</script>
I am able to get the height of the first bio i look at, but on page change it keeps that set height. I basically want the code in mounted to be able to rerun based on the index of the slide i am on. I need 'newHeight' to update on each page change. I tried grabbing the 'currentPage' from my parent component using props, but it pulls undefined.
here is all a snippet from my data to show you what data i currently have:
{
index: 12,
name: 'Name of Person',
carouselImage: require('#/assets/carousel-images/image.jpg'),
imgSrc: require('#/assets/bio-page-image-placeholder.jpg'),
shortBio: '<p>a bunch of text being pulled</p>',
pin: require('#/assets/image-of-pin.png')
}
this is also my store just in case
const store = new Vuex.Store({
state: {
foundersList: founders,
chairmanList: chairmans,
selectedList: founders,
selectedListIndex: -1
},
mutations: {
setSelectedState (state, list) {
state.selectedList = list
},
setSelectedListIndex (state, idx) {
state.selectedListIndex = idx
}
}
})
Alright, so this is a good start. Here's a few things I would try:
Move the code you currently have in mounted to a new method called calculateHeight or something similar.
Call the method from your scrollUp and scrollDown methods.
So your final code would look something like this:
export default {
props: [
'member', 'currentPage'
],
data () {
return {
scrollVar: 0,
outerHeight: 0,
innerHeight: 0,
newHeight: -10
}
},
mounted () {
this.calculateHeight();
},
methods: {
calculateHeight() {
this.outerHeight = document.getElementsByClassName('bio-container')[0].clientHeight
this.innerHeight = document.getElementsByClassName('inner-scroll')[0].clientHeight
this.newHeight = this.outerHeight - this.innerHeight
},
scrollUp () {
console.log(this.scrollVar)
this.scrollVar += 40
this.calculateHeight()
},
scrollDown () {
console.log(this.scrollVar)
this.scrollVar -= 40
this.calculateHeight()
},
showVideo () {
this.$emit('showContent')
}
}
}
I am trying to make a component with a list of items and when I click on each of the items, it shows me an edit popup. When I click on it again, it hides the edit popup. But I would like to also be able to click anywhere on the document and hide all edit popups (by setting edit_item_visible = false).
I tried v-on-clickaway but since I have a list of items then it would trigger multiple times. And the #click event would trigger first and then the clickaway event would trigger multiple times and hide it right after showing it. I also tried to change the component's data from outside but with no luck.
Vue.component('item-list', {
template: `
<div>
<div v-for="(item, index) in items" #click="showEdit(index)">
<div>{{ item.id }}</div>
<div>{{ item.description }}</div>
<div v-if="edit_item_visible" class="edit-item">
Edit this item here...
</div>
</div>
</div>
`,
data()
{
return {
items: [],
edit_item_visible: false,
selected: null,
};
},
methods:
{
showEdit(index)
{
this.selected = index;
this.edit_item_visible = !this.edit_item_visible;
}
},
});
const App = new Vue ({
el: '#app',
})
If you want to be able to edit multiple items at the same time, you should store the list of edited items, not global edit_item_visible flag.
showEdit(item)
{
this.selected = item;
this.editing_items.push(item);
}
// v-on-clickaway="cancelEdit(item)"
cancelEdit(item)
{
let idx = this.editing_items.indexOf(item);
this.editing_items.splice(idx, 1);
}
My app consists of:
A component named
<consl :output="output" #submit-to-vue><consl>
which contains an input that calls a submit() method when enter key is pressed.
<div>
<output v-html="output"></output>
<div id="input-line" class="input-line">
<div class="prompt">{{ prompt }}</div>
<div>
<input class="cmdline" autofocus
v-model.trim="command"
#keyup.enter="submit"
:readonly="submited" />
</div>
</div>
Then the method submit() emits an event #submit-to-vue to parent method submitv() that create an instance of the same component and adds it to the DOM.
//........
methods: {
submit: function () {
this.$emit('submit-to-vue')
this.submited = true
}
},
and
//......
methods: {
submitv: function () {
var ComponentClass = Vue.extend(consl)
var instance = new ComponentClass({
propsData: { output: this.output }
})
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
What I want to accomplish ?
I want to create a new consl component and add it to the DOM every time the old one is submited. (I want my app to emulate a terminal)
The problem
When submitted the new created component does not contain the #submit-to-vue event listener, which make it unable to recall the submitv() method.
Questions
How can I solve this problem ?
Is this the proper way to do things in VueJs or is there a more elegent way ?
In parent component, declare one data property=childs, it will includes all childs already created.
So once parent component receives the event=submit-to-vue, then add one new child to this.childs
Finally uses v-for to render these child components.
The trick: always consider the data-driven way, doesn't manipulate dom directly as possible.
below is one simple demo :
Vue.config.productionTip = false
Vue.component('child', {
template: `
<div>
<div>Label:<span>{{output}}</span></div>
<div>Value:<span>{{command}}</span></div>
<div id="input-line" class="input-line">
<div class="prompt">{{ prompt }}</div>
<div>
<input class="cmdline" autofocus
v-model.trim="command"
#keyup.enter="submit"
:readonly="submited" />
</div>
</div>
</div>`,
props: ['output'],
data() {
return {
submited: false,
command: ''
}
},
computed: {
prompt: function () {
return this.submited ? 'Already submitted, input is ready-only now' : ''
}
},
methods: {
submit: function () {
this.$emit('submit-to-vue')
this.submited = true
}
}
})
app = new Vue({
el: "#app",
data: {
childs: [{'output':'default:'}]
},
methods: {
addChild: function () {
this.childs.push({'output': this.childs.length})
}
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>
<ul>
<li v-for="(child, index) in childs" :key="index">
<child :output="child.output" #submit-to-vue="addChild()"></child>
</li>
</ul>
</div>
</div>