I am getting error when trying use the component dialog, it asked to add data-app but when i added it, it show the current error.
<template v-slot:[`item.actions`]="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">
mdi-pencil
</v-icon>
<v-icon small #click="deleteItem(item)">
mdi-delete
</v-icon>
</template>
editItem (item) {
this.editedIndex = this.orders.indexOf(item)
this.editedItem = Object.assign({}, item)`enter code here`
this.dialog = true
},
Error message:
client.js?06a0:102 DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
at VueComponent.initDetach (webpack-internal:///./node_modules/vuetify/dist/vuetify.js:39715:14)
at Array.eval (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1988:12)
at flushCallbacks (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1914:14)
Related
I'm getting this super confusing Vue warning and I can't figure it out:
[Vue warn]: Property "me" was accessed during render but is not defined on instance.
at <UserReputation user= {reputation: {…}, _id: '638f81dbb288267e6340ddbc', username: 'artsborba'…} class="mt-1" >
...
Here on StackOverflow I can find more topics with this warning, but seems each one is a different case, and mine is just not making sense! My vue version is ^3.1.0, vuetify ^3.1.0 and vite ^2.5.4.
My component looks like:
// MyComponent.vue
<v-menu location="end" location-strategy="connected">
<template #activator="{ props }">
<div
v-bind="props"
class="user-info-container cursor-pointer"
>
<UserAvatar
:user="me"
/>
<div v-if="me" class="user-data">
<div class="username-row">
{{ me.username }}
<AppIcon
icon="downward-arrow"
color="primary"
class="user-menu-icon"
:class="{ 'is-active': props['aria-expanded'] === 'true' }"
/>
</div>
<!-- HERE WE HAVE THE WARNING SOURCE -->
<UserReputation :user="me" class="mt-1" />
</div>
</div>
</template>
...
</v-menu>
In the same component I have the me set as a prop:
props: {
me: {
validator: prop => typeof prop === 'object' || prop === null,
required: true
}
},
Now, please notice that in the same component I have another one using this me pro (<UserAvatar :user="me"...>), which doesn't trigger this warning. Only the <UserReputation... component usage does! If I comment out the <UserReputation... tag, the warning goes away.
I already tried placing this me as a computed value instead of a prop, directly inside MyComponent.vue (it comes from a Pinia store) and many other structures with no success. Hopefuly someone can help on this! Thanks in advance.
Maybe you are accesing at me property inside your UserReputation component, but in the parent you are passing me to user prop, like this :user="me", so... you need to access to user prop instead me prop inside UserReputation component.
If this answer doesn't resolve the question, please share us the structure of UserReputation component.
Using script setup in vue3, I have code like this in template
...
<router-link
v-for="t in tas"
:key="t.text"
custom
:to="`/dashboard/${t.type}`"
v-slot="{ isActive, navigate }"
>
<div
:class="{ active: isActive }"
#click="navigate"
>
{{ t.text }}
</div>
</router-link>
...
Its throwing error TypeError: Cannot destructure property 'isActive' of 'undefined' as it is undefined. when running a simple test
it('match snapshot', () => {
const wrapper = shallowMount(MYView, {
stubs: ['router-link'],
});
expect(wrapper.html()).toMatchSnapshot();
});
You need to stub it using RouterLinkStub, see https://test-utils.vuejs.org/api/#routerlinkstub
In vue3 component I have this code:
<script>
export default {
data() {
return {
vendedores: [{
id: 1,
nombre: "Name test1"
}],
};
}
};
</script>
Having this template, there everything works fine:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
</div>
But in this one is displaying an error everytime vite compiles the assets:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
<button
:class="(vendedor.seleccionado)? 'bg-zinc-800 border-amber-300' : 'bg-transparent'"
class="border-zinc-400 rounded-full py-3 text-left hover:border-violet-200"
>
<span> Test</span>
</button>
</div>
The error displayed in the console is the following:
TypeError: can't access property "nodeValue", node is null
setText runtime-dom.esm-bundler.js:30
processText runtime-core.esm-bundler.js:5109
patch runtime-core.esm-bundler.js:5064
patchKeyedChildren runtime-core.esm-bundler.js:5849
patchChildren runtime-core.esm-bundler.js:5792
patchElement runtime-core.esm-bundler.js:5305
processElement runtime-core.esm-bundler.js:5165
patch runtime-core.esm-bundler.js:5082
...
I have updated #vite to last version (^3.2.0) and vue3 (3.2.41). Other components working fine in other projects with the same version.
I use Vuejs3 (incl. Vue router) with Vuetify 3.0.0-beta.10
I built 4 different simple pages (Home.vue / HowItWorks.vue / Login.vue / Register.vue)
On the Home.vue page is a image implemented via v-img
I route between the different pages via named routes
I face the following problem. I can route between the different pages without any problem but as soon as I click on my home-link in my navbar to get to my Home.vue page, I get the following error and the routing doesn't work anymore. I can still see that the URL changes when I click a link but the side os not displayed. I figured out that as soon as I delete the image (implemented via v-img) in my Hone.vue file, the problem disappears.
What do I do wrong?
Error Message
Uncaught (in promise) TypeError: oldBindings[i] is undefined
invokeDirectiveHook runtime-core.esm-bundler.js:2779
patchElement runtime-core.esm-bundler.js:5349
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
promise callback*queueFlush runtime-core.esm-bundler.js:280
queueJob runtime-core.esm-bundler.js:274
scheduler runtime-core.esm-bundler.js:1803
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
poll VImg.tsx:166
pollForSize VImg.tsx:176
init VImg.tsx:136
promise callback*nextTick runtime-core.esm-bundler.js:242
init VImg.tsx:126
observer index.ts:54
mounted index.ts:33
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invokeDirectiveHook runtime-core.esm-bundler.js:2786
mountElement runtime-core.esm-bundler.js:5222
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
runtime-core.esm-bundler.js:2779:12
invokeDirectiveHook runtime-core.esm-bundler.js:2779
patchElement runtime-core.esm-bundler.js:5349
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
(Async: promise callback)
queueFlush runtime-core.esm-bundler.js:280
queueJob runtime-core.esm-bundler.js:274
scheduler runtime-core.esm-bundler.js:1803
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:384
triggerRefValue reactivity.esm-bundler.js:1000
effect reactivity.esm-bundler.js:1134
triggerEffect reactivity.esm-bundler.js:394
triggerEffects reactivity.esm-bundler.js:379
triggerRefValue reactivity.esm-bundler.js:1000
set value reactivity.esm-bundler.js:1045
poll VImg.tsx:166
pollForSize VImg.tsx:176
init VImg.tsx:136
(Async: promise callback)
nextTick runtime-core.esm-bundler.js:242
init VImg.tsx:126
observer index.ts:54
(Async: IntersectionCallback)
mounted index.ts:33
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invokeDirectiveHook runtime-core.esm-bundler.js:2786
mountElement runtime-core.esm-bundler.js:5222
flushPostFlushCbs runtime-core.esm-bundler.js:339
flushJobs runtime-core.esm-bundler.js:393
Home.vue file (When i delete the v-img here, the problem disappears)
<template>
<div>
<v-app-bar
elevation="10"
color="white"
>
<router-link :to="{ name: 'Home'}">
<img
class="ml-2"
:src="logoImage"
alt="logo"
height="40"
>
</router-link>
<v-spacer></v-spacer>
<router-link :to="{ name: 'HowItWorks'}">
<h4 class="font-weight-light mx-5 text-black">
{{ $t('nav.howitworks') }}
</h4>
</router-link>
<router-link :to="{ name: 'Login'}">
<h4 class="mx-5">
<v-btn
color="black"
class="font-weight-black"
variant="outlined"
>
{{ $t('nav.login') }}
</v-btn>
</h4>
</router-link>
</v-app-bar>
</div>
</template>
<script setup>
import logoImage from '#/assets/pics/postvivo_logo_black.png'
</script>
<style scoped>
a { text-decoration: none; }
</style>
Thanks for your help!!
Chris
I have a single file component called confirm-document that looks something like this:
Sandbox
<template>
<v-dialog>
<template v-slot:activator="{ on }">
<v-btn v-bind="$attrs" :class="activatorClass" v-on="on">{{
title
}}</v-btn>
</template>
<v-card>
<v-card-title>{{ title }}</v-card-title>
<v-card-text><slot></slot></v-card-text>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "ConfirmDocument",
props: {
title: String,
activatorClass: {},
},
};
</script>
So when I then use this component like:
<ConfirmDocument
class="useless-class"
activator-class="mt-4 ml-n4"
title="Consent"
> Document Content </ConfirmDocument>
Sandbox
The classes get applied to the v-dialog, which ends up as an invisible div with nothing inside and both the activator and modal attached as sibling nodes.
Since this is mainly a wrapper component to provide a consistent UI, I actually only need for the activator to be positionable. So I want to pass the class and style props to the v-activator.
The activator-class prop that I have declared actualy works fine. But I am very curious if there a way to change the element to which the component's class and style attributes are bound, so that I can use class instead?
This is fixed in Vue.js v3 ref
For Vue.js v2, you can try this
Check v-bind and attrs computed property below
<template>
<v-dialog>
<template v-slot:activator="{ on }">
<v-btn v-bind="attrs" v-on="on">{{
title
}}</v-btn>
</template>
<v-card>
<v-card-title>{{ title }}</v-card-title>
<v-card-text><slot></slot></v-card-text>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "ConfirmDocument",
inheritAttrs: false, // <- added just for safety
props: {
title: String,
},
computed: {
attrs() {
const attrs = { ...self.$attrs }
// adding class and style for `v-bind`
attrs.class = self.$vnode.data.staticClass
attrs.style = self.$vnode.data.staticStyle
return attrs
}
}
};
</script>
Explanation - In Vue.js version 2.x.x, $attrs does not include class and style (ref) but there are many scenarios in which we wanted to pass on all the props along with class and style into another component so, $attrs should have class and style in it which they did add in version 3 of vue.js.
There is a detailed discussion on this topic on github do check it out for more details.
For version 2, what we wanted to achieve is that class and style can be passed to another component. We can pull it off by getting the class [as string] and style [as object] from the current component node i.e. vnode and pass it on to the other component using v-bind.
Now, you can pass props along with class and style into another component inside ConfirmDocument directly from the parent (or caller) component
What's about simple using props to handle this?
<template>
<v-dialog>
<template v-slot:activator="{ on }">
<v-btn :class="btnClass" v-on="on">Read {{ title }}</v-btn>
</template>
<v-card>
<slot></slot>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: {
btnClass: { type: String },
title: { type: String }
}
}
</script>
and using the component:
<confirm-document
btn-class="mt-0 mb-0"
title="Privacy Policy"
>
Lorem ipsum dolor sit amet
</confirm-document>
I think you can use the inheritAttrs: false property. What it does it to make sure that attributes are not applied automatically to the root element and it lets you choose where to apply them instead.
<template>
<v-dialog>
<template v-slot:activator="{ on }">
<v-btn v-bind="buttonAttrs" >Read {{ title }}</v-btn>
</template>
<v-card>
<slot></slot>
</v-card>
</v-dialog>
</template>
<script>
export default {
inheritAttrs: false,
props: {
title: {type: String},
},
computed: {
buttonAttrs () {
// select which attrs to apply
const { title, ...rest } = this.$attrs;
return rest;
}
}
}
</script>
A working (and a bit cluttered) example can be found here.