I am using v-for for and then showing the components. is rendering fine but inner element is missing. I am unable to understand. You can see two columns are empty but in the console three are 5 components rendered but showing only 3 components. Tell what may be the problem. any help will be appreciated
<div v-for="(counterDate, index) in fulldate_array" >
<template v-if="shift[officer.oid]">
<shiftlayout v-for="(data,shiftKey) in shift[officer.oid][fulldate_array[index]]" :shift_data="data" :shiftKey="shiftKey" :date="singledate_array[index]" :fulldate="fulldate_array[index]" :width="shiftWidth"/>
</template>
</div>
Related
I'm having trouble trying to use the Vue.Draggable library. I would like to use a component inside my draggable while keeping the transition-group. It's working without the transition group but whenever Im adding the transition-group tag with the animation name its not working anymore. My components elements are not showing up and I'm having this error :
TypeError: Cannot set properties of null (setting '__draggable_context')
Here is my code :
<draggable :list="teams" item-key="idteam" tag="transition-group" :component-data="{name:'fade'}>
<template #item="{ element, index }">
<my-team :id="element.idteam" :name="element.teamName" :index="index">
</my-team
></template>
</draggable>
Any idea how could I make all work together ?
Thanks for your help
You need to add :animation="200"; only adding tag="transition-group" is not enough.
i have a strange problem with arrays in vue3
When loading the components, a start array is transferred, in the components the values are taken over with a watcher if the start array changes. that works wonderfully. the whole thing is a little game, the user moves a cone on a certain route.
I switch to another component by changing a page number. the component with the game should actually be completely from the dom, I don't see anything in the tree either.
<transition name="fadepage" mode="out-in" >
<div v-if="getPage()==3">
<VueGameIntro :content="content" :level="level" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" :levelcolor="levelColor" #mqttMessage="changeMqttMessage"></VueGameIntro>
</div>
</transition>
<transition name="fadepage" mode="out-in" >
<div v-if="getPage()==4">
<VueGame :content="content" :level="level" :playerlist="playerList" :startpointlist="startPointList" :levelendstate="levelEndState" :activeplayerlist="activePlayerList" :kegelmoved="kegelMoved" :kontrastswitch="kontrastSwitch" :id="id" #mqttMessage="changeMqttMessage" #changeCurrPoint="changeCurrPoint"></VueGame>
</div>
</transition>
<transition name="fadepage" mode="out-in">
<div v-if="getPage()==5">
<VueGameOutro :content="content" :level="level" :levelendstate="levelEndState" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" #mqttMessage="changeMqttMessage"></VueGameOutro>
</div>
ok, when the first level has been played it changes to another component VueGameOutro, then it goes back to the actual game components with a new level. Suddenly I have the feeling that this array exists twice.
in the console i see different values than in the output on the screen: {{ currPointList }} shows something different than this.currPointList. in the vue dev plugin, however, are the values as well as the screen output. but the component definitely has a different starting point than the one in the currPointList.
the value in the console seems to have been the latest from the previous level.
Is that possible? how can I be sure that a component is completely gone?
are there arrays that have different values for string or number?
##########################################################
edited
that's the console output:
currPointList unmounted 25,0,0,0,
currPointList mounted 8,0,0,0,
GAME_MOVE currPointList #move,1,3,1 25,0,0,0,
currPointList before move 25,0,0,0,
currPointList move point updated 3,0,0,0,
as you can see, the 25 is in front of the unmount, then the component is reloaded and gets the 8 once via a property form the parent comp
then a move command arrives via websocket, an mqtt component receives the message and sends it to the game via MITT emitter. there's no other place to change currPointList. the first value jumps back to 25.
the problem occurred because the emitter.on("eventname" ...) was not deleted when removing the components. I also changed the emitter.on to an arrow function.
Hello and thank you for reading my question.
I have an array of objects looking like this :
[{
id=1,
products= [a,b,c]
},
{
id=2,
products= [d,e,f]
}]
I want to display data in a v-data-table with two columns (id and products) and products items in a nested v-data-table.
So far I found that i should use template and v-slot but I don't find the right way to do it.
<v-data-table
item-key="id"
items={products}
>
<template v-slot="">
<v-data-table> ... </v-data-table>
</template>
</v-data-table>
Instead of the nested table I get
[object Object],[object Object]
How to use template v-slot in tsx files ?
And more generally, how to 'translate' vuetify js to tsx (documentation) ?
Thanks again
you have made a slot which is correct, but you need to tell vuetify which slot you want to access. To access the default <td> slot of all rows you can simply use v-slot:body="{ items }" and pass it the items, so you can create a view per column. (Available slots are listed here Vuetify doc, if you scroll down. Each component has them)
I have made a codepen that you can check out Codepen. As of translating it to tsx, I can't help you, since I haven't worked with it, but if you grasp the concept of how to do it on the vuetify part, you should be good!
I am work in company with big frontend team, and guys use multiple template tag in single file components. Before that I never see something like this, for me it bad practice. But head developers think that I am stuped, when I ask about that.
Can some one please explain me, when I must use it and why? and if it possible please give link to vue documentation.
And yes, we use vuetify.
example:
<template>
<VContainer>
<VRow>
<VCol>
<h2>
{{ title }}
</h2>
<p>
{{ subtitle }}
</p>
</VCol>
</VRow>
<Share />
<template v-if="p.length > 0">
<VRow>
<VCol>
{{ text }}
</VCol>
</VRow>
<VDivider/>
</template>
<template v-for="(t, index) in ts">
<VRow :key="index">
<VCol v-if="t.p.length > 0">
{{ text }}
</VCol>
</VRow>
<VDivider
v-if="index < t.length - 1"
:key="`divider-${index}`"
class="mx-3"
/>
</template>
</VContainer>
</template>
The <template> used here is just a way to handle loops or conditionals without inserting extra nodes into the DOM.
You could put the v-if or v-for directly on the <VRow> instead of on a <template> that wraps it, but sometimes that's undesirable -- if there are already other conditions there that you want to keep separate, or if you want to wrap multiple nodes in the same condition, as in your example where you have both a <VRow> and a <VDivider> contained in a single <template>.
It's not bad practice and has no undesirable performance effect at all. Your head developers should be better able to communicate that to you rather than calling you 'stupid'.
I think it does't matter use multiple template, We should not use div wrapper the condition render Component, the div will insert to DOM.
here is the official documemnt https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt
I have a list of components that I render using v-for. Not all the components are shown simultaneously. I page the the array of rendered components by using slice.
These components shouldn't be rerendered, as some of them have user inputted data and some of them do network related tasks.
I tried to use <keep-alive>. However, this renders only the first component.
<keep-alive>
<component :is="component.type" :key="component.id" v-for="component in components">
</keep-alive>
How do I keep a dynamic list of components alive?
<div v-for="comp in compList" :key="'container'+comp.keyId" >
<keep-alive>
<component :is="comp.type" :key="comp.keyId"></component>
</keep-alive>
</div>
this above works for me . Pushing elements to compList correctly creates new instances of their respective components. Moving an element's index within the array , maintaining key, does not call destroy/create and maintains state within each component
Tested the answer above in a fiddle and doesn't work. https://jsfiddle.net/z11fe07p/680/
<div v-for="component in myComponents" :key="component.id" >
<keep-alive>
<component :is="component.type"
:name="component.name">
</component>
</keep-alive>
</div>
Also i would avoid using vue reserved words such as components because there is a components key in the vue instance which tells what components the instance is using.
I read source code of Vue's <keep-alive>, and I created new Component which works very well with list.
package name is vue-keep-alive-global. Here is a link, https://www.npmjs.com/package/vue-keep-alive-global
How to use :
<KeepAliveGlobal>
<YourComponent
:key="uniqueKey"
/>
</KeepAliveGlobal>
With Array,
<template v-for="(item, index) of array">
<KeepAliveGlobal :key="`blah-blah-${index}`">
<YourComponent
:item="item"
:key="`your-component-${index}`"
/>
</KeepAliveGlobal>
</template>
KeepAliveGlobal will cache component by key.
There's note at Vue docs about your use case
Note, <keep-alive> is designed for the case where it has one direct
child component that is being toggled. It does not work if you have
v-for inside it. When there are multiple conditional children, as
above, ` requires that only one child is rendered at a
time.
https://v2.vuejs.org/v2/api/#keep-alive
Try v-once directive instead.
https://v2.vuejs.org/v2/api/#v-once