I have the following code where I am trying to pass individual tab components into a tabs component via slots. However, the tabs do not seem to be getting passed. Putting {{ tabs }} on the template only shows an empty array.
<template>
<article>
{{ tabs }} // empty array
<header class="tabs">
<ul>
<li v-for="(tab, index) in tabs" :key="index">
<div class="nav-item"
:class="{ 'is-active': tab.isActive }"
#click="selectTab(tab)">
{{ tab.name }}
</div>
</li>
</ul>
</header>
<section class="tabs-details">
<slot></slot>
</section>
</article>
</template>
<script>
export default {
data: () => {
return {
tabs: []
}
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name === selectedTab.name;
});
}
},
created() {
console.log('created[Tabs.vue]-> ', this.$children) // nothing here
this.tabs = this.$children; // not working
}
}
</script>
I have my components registered in the parent like so:
import Tab from '#/components/Tab'
import Tabs from '#/components/Tabs'
export default {
components: {
Datepicker,
Tab,
Tabs
},
...
The template is pretty straight forward. Note, the contents of the individual tabs display fine when selected="true"
<Tabs>
<Tab name="hours" selected="true">Contents here...</Tab>
<Tab name="pay"></Tab>
</Tabs>
I have checked in the browser console and, although the nav-item <li> elements are being created, they have no content.
I'm new to slots so maybe I am missing something obvious or the code syntax I am using is outdated. Any help is much appreciated.
Try to use this.$slots :
this.tabs = this.$slots.default();//returns vnodes, that can be rendered via render function
$children has been deprecated in Vue 3:
In 3.x, the $children property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using template refs.
If you're trying to get children of <slot></slot>, use this.$slots.default(), as suggested in Boussadjra's answer.
In Vue2, the syntax for getting the default slot contents is this.$slots.default (not a function).
Notes:
you'll get back an array of VNodes, not actual DOM,
you can only access $slots after component has been mounted (e.g: in mounted() hook)
If you want specific data from the vNodes, you'll have to log them and see where exactly it is in your version of Vue (vNodes have had minor changes over time - they're considered internal API).
My advice would be to upgrade to a newer version of 2. If not 2.7.10, at least 2.6.14. Some of the available documentation on Vue 2 describes features which were not yet added in 2.2.3. $slots had a major revamp in 2.6.
For example, I was using slots at the time, but if you ask me now how they looked like, I couldn't tell you with certainty.
Related
I have an array sheets initialised in data, has an item pushed to it when a button is pressed
data() {
return {
sheets: []
};
}
And in the html I'm trying to add a Card component for each element in this array and pass the data as a prop, but none of the components get rendered and there is no error message. I also tried putting the v-for directly on the component but it has the same result
<div id="sheets">
<template v-for="c in sheets">
<Card :info="c"/>
</template>
</div>
Meanwhile if I do something like this, it displays all the data in the array correctly, so I dont understand whats going wrong here
<div id="sheets">
<template v-for="c in sheets">
<span>{{c}}</span>
</template>
</div>
--
Solution
In my component the data from prop was being manipulated in the created() function, it works after I did this in the mounted() function instead
Make sure you have following things done correctly:
Imported your Card component
Passing and accessing the props
There are no conflicts in the variable names and id names
Next thing you need to know and is a must while using v-for is adding :key to the element which acts as unique id and lets Vue detect that each element is unique inside the v-for. One thing to be noted while using :key is that, you cannot use :key on the <template> tag.
Adding a validation using v-if would be a good idea, so v-for only executes if the array is not empty.
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="(sheet,index) in sheets" :key="index" :info="sheet" />
</template>
</div>
Edit 1: As mentioned by Michal in the comments section that using index can lead to difficulties while debugging issues. You can use either :key="sheet" or if sheet is object including some unique id in it, then use :key="sheet.id" and get rid of the index
// use this if sheet is not an object
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="sheet in sheets" :key="sheet" :info="sheet" />
</template>
</div>
OR
// use this if sheet is an object having some unique id in it
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="sheet in sheets" :key="sheet.id" :info="sheet" />
</template>
</div>
As :key is not mandatory, It should work without that as well. I just created a working fiddle below. Please have a look and try to find out the root cause.
Vue.component('card', {
props: ['info'],
template: '<span>{{ info }}</span>',
});
var app = new Vue({
el: '#app',
data: {
sheets: [],
count: 0
},
methods: {
create() {
this.count++;
this.sheets.push('Sheet' + this.count);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="create">Create a Card!</button>
<template v-for="c in sheets">
<Card :info="c"></Card>
</template>
</div>
I'm trying to parse out the contents of a slot and render the contents in multiple places. The idea is to create a wizard that allows each step to be contained in a single component. Something like this:
Wizard Component Definition:
<ul>
<li v-for="icon in icons">{{icon}}<li>
</ul>
<section>
<ul>
<li v-for="body in bodies">{{body}}</li>
</ul>
</section>
Wizard Component Script
import {ref} from "vue";
export default {
setup(props, {slots}) {
const icons = ref([]);
const bodies = ref([]);
for (let item of slots.default()) {
// not sure if I need to call these, ex: item.children.icon()
icons.value.push(item.children.icon);
bodies.value.push(item.children.body);
}
return {icons, bodies};
}
}
Wizard Component Usage:
<wizard>
<wizard-page>
<template #icon>someIcon</template>
<template #body>someBody</template>
</wizard-page>
<wizard-page>
<template #icon>someIcon2</template>
<template #body>someBody2</template>
</wizard-page>
</wizard>
The obvious problem here is that everything is VNodes and doesn't just render nicely to the DOM. I've tried using render() and h() but those don't seem to be what I'm looking for. Also tried the v-html binding, but again, that isn't expecting a VNode.
I'm not sure if there's a better way to do this, or if I'm missing something simple here, but I'm not seeing an easy way to split apart a slot and render the contents in different places.
VUE 3
<component :is="body">
You can implement it in the following way
<ul>
<li v-for="body in bodies" :key="uniquekey">
<component :is="body" />
</li>
</ul>
link to docs:
https://vuejs.org/guide/essentials/component-basics.html#dynamic-components
I'm working on a University project and trying to implement a feature that allows the navigation drawer to close whenever I click on one of the items in it. However, I'm not sure how to handle this.
<template>
<div id="navigation-mobile">
<Searchbar class="search"/>
<ul v-for="item in tabs"
:key="item.path"
active-class
#click="$router.push(item.path)"
>
<li>{{item.name}}</li>
</ul>
<div class="mobile-footer">
<ul>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</template>
And here's what I have in App.vue, which contains a part of the nav-drawer:
<template>
<v-app id="app">
<NavBarMobile v-if="mobileView"/>
<div class="content" :class="{'open': showNav}">
<div style="height:20px"></div>
<div id="navigation-icon" v-if="mobileView"
#click="showNav = !showNav">
<v-icon medium dark>menu</v-icon>
</div>
<NavBar v-if="!mobileView"></NavBar>
<v-content class="pa-0" transition="slide-x-transition"></v-content>
<Footer v-if="!mobileView"></Footer>
<router-view></router-view>
</div>
</v-app>
</template>
This is my code so far. I would like to use a #click, I think that would be the most efficient way to do that, but I don't know if I can, since I'm already using it. I'm not very good at programming. Any suggestions?
Here's the codepen: https://codesandbox.io/s/gameshelf-0209-jack-forked-zobe5
You can find the component in NavBarMobile.vue
Thanks in advance for taking the time to read this post!
There are a few ways you can achieve this. The simplest, in my opinion, would be to simply "watch" the $route object from within your App.vue:
export default {
// ...
watch: {
$route(to, from) {
this.showNav = false
}
}
}
The watch property on the Vue instance contains functions that will watch for changes to variables of the same name. Upon change, the function is run.
More on watchers and computed properties: https://v2.vuejs.org/v2/guide/computed.html
EDIT: Some extra info about reacting to Router changes: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
Another way to achieve it is by emitting an event from the child component.
first point the click event to a method to handle your logic like so :
<ul v-for="item in tabs" :key="item.path" active-class #click="redirect(item.path)">
then add a method in your script to emit a custom event from your NavBarMobile component :
methods: {
redirect(path) {
this.$router.push(path)
this.$emit('change', false)
}
},
and finally listen for this event from the parent component:
<NavBarMobile v-if="mobileView" #change="showNav = $event"/>
I have a question on how to add an unread component before a dynamic component (message, can be of a different type, which requires different rendering) inside a v-for loop.
Here is my sample code without the unread panel.
<template>
<div>
<Message v-for="(message, index) in messages" :key="index" :message="message></Message>
</div>
</template>
AIM:
I want to add an unread panel before the message that is unread. And clearly, it will be added once in the template. So I would like another developer when viewing the template, can easily know that it does the job.
How to add Unread Panel
Method 1:
Add it in template directly.
<template>
<div>
<template v-for="(message, index) in messages" :key="index">
<Unread v-if="message.getId() === firstUnreadId"></Unread>
<Message :message="message"></Message>
</template>
</div>
</template>
Problem:
There are lots of unnecessary checking to see if unread is needed to place to the DOM, not to mention, it is difficult for the developer to know that the unread component will only be loaded once.
Method 2:
Put unread component inside messages, and add one more message into messages, so that the v-for loop will mark it work.
<template>
<div>
<template v-for="(message, index) in messages" :key="index">
<Message :message="message"></Message>
</template>
</div>
</template>
<template>
<message :is="currentComponent"></message>
</template>
<script>
export default {
props: {
message
},
computed: {
currentComponent: function() {
switch (this.message.getType()) {
case "unread":
return "Unread";
// ...
}
}
}
}
</script>
Problem:
Unread is definitely not a message, it seems a trick to make it work well.
I don't think any of the methods suggested above is a good one, does anyone have any solution for this? Thanks in advance.
Method 1 looks fine to me. Method 2, as you say, might be tricky to understand later. Otherwise, you could set a firstUnread property directly on the appropriate message in the array, then test that. You could do this when you load the array, or you could make the array a computed property, so that firstUnread is recalculated whenever the array is changed. Does that help?
So after following a beginner Vue tutorial to setup a Todo app, I decided to try to adapt some parts of it for a website I'm trying to make. What I'm stuck on is that despite everything saying my for-loop is supposed to work, it doesn't.
The project itself was created using the vue-cli, and most of the code copy-pasted from the tutorial. (which is working fine with its own for-loop)
It seems like the data might be not passed onto the template maybe?
I have tried:
having the info inside the props and data sections
passing whole object and only parameters to the template
tried with hard-coded values inside array which is iterated on
(After setting up a new vue-cli project:)
App.vue:
<template>
<div id="app">
<create-section v-on:create-section="addSection" />
<section v-for="section in sections" v-bind:key="section.title" :info="section"></section>
</div>
</template>
<script>
import CreateSection from "./components/CreateSection";
import Section from "./components/Section";
export default {
name: "App",
components: {
CreateSection,
Section
},
data() {
return {
sections: []
};
},
methods: {
addSection(section) {
this.sections.push({
title: section.title,
description: section.description
});
console.log(
"Added to sections! : " + section.title + " | " + section.description
);
console.log("Sections length: " + this.sections.length);
}
}
};
</script>
Section.vue
<template>
<div class="ui centered card">
<div class="content">
<div class="header">{{ info.title }}</div>
<div>{{ info.description }}</div>
</div>
</div>
</template>
<script type = "text/javascript" >
export default {
props: {info: Object},
data() {
return {};
}
};
</script>
Expected result:
Display Section template on the website (after creating it with addSection that another script calls. Not included for brevity)
Actual result:
Nothing is displayed, only a empty tag is added
I believe the problem is that you've called it Section. As <section> is a standard HTML element you can't use it as a component name.
There is a warning built into the library but it seems to be case sensitive, which isn't entirely helpful. Try changing your components section to this:
components: {
CreateSection,
section: Section
},
You should then see the warning.
The fix would just be to call it something else.
This is mentioned in the first entry in the style guide:
https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential
section is an existing HTML5 element, you should name your section component something different.
If you really want to name the component Section, register it as 'v-section'
The problem is that when you do the loop in the <section v-for="section in sections" v-bind:key="section.title" :info="section"></section> the Array sections is not ready, there is nothing there.. so when you add new things to this array you need to trigger (computed prop) to send again the data to the section component.
Aside from the issue with using an existing HTML5 command as a name for your Vue component (you should change that to another name by the way), you should also look into how you declared the props within Section.vue. The code below shows the correct way to do it:
<script type = "text/javascript" >
export default {
props: ['info'],
data() {
return {};
}
};
</script>
The props take in the name of the property being declared from the parent component and should be a string.
Hope this helps.