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
Related
I facing such strange warning.
I defined non-Array types look like posted sample codes.
But, Vue3 was throwing warnings.
Have some solutions??
or I got some miss takes?
Simply, I was defined modelValue type look like T | T[] | undefined
But, Vue3 detected Null | Array.
Then, How a T are have been ignored??
I'm using Nuxt3, Vue3, composition api
// types/index.d.ts
type ItemType { [key: string]: any } | string | boolean
// CSelect.vue
<template><div>{{/* contents - It's not a key on this Topic */}}</div></template>
<script setup lang="ts" generic="T extends ItemType">
defineProps<{
items: T[]
modelValue: T | T[] | undefined
}>()
</script>
// create.vue - how i used
<template>
<div class="create">
<div class="title-area">
<CForm>
<InputTemplate>
{{/* This CSelect components are Throw warnings by v-model */}}
<CSelect
v-model="data.category"
class="nft-input"
:items="categoryItems"
/>
</InputTemplate>
</CForm>
</div>
<div>
</template>
<script setup lang="ts">
const categoryItems = computed(() => ['value1', 'value2', 'value3'])
const data = reactive({ category: String(categoryItems.value[0]) })
</script>
[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Null | Array, got String with value "Limited".
at <CSelect modelValue="Limited" onUpdate:modelValue=fn class="input" ... >
at <InputTemplate title="Category" >
at <CForm modelValue=false onUpdate:modelValue=fn class="inputs-area" ... >
at <Create onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <Anonymous key="/member/99/create" routeProps= {Component: {…}, route: {…}} pageKey="/member/99/create" ... >
at <Anonymous >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <Default >
at <Anonymous key="default" name="default" hasTransition=false >
at <Anonymous >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>
Your parent component create.vue has no setup and lang="ts". You're passing to a child v-model and class with no : so they aren't props, they are attributes. div element will have them because he is a root element.
Example how to use attributes:
<template>
<div>
<label :for="label">{{label}}</label>
<input v-bind="$attrs" :id="label" :value="$attrs.modelValue" #input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
defineProps(['label'])
defineEmits(['update:modelValue'])
</script>
v-bind assign all attributes to one element.
I'm not using generic in components, so I can just tell you stop! User don't care about generic, and you are not experienced programmer to build UI libraries for different programmers.
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.
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'm new to Storybook, and am having trouble getting components which project ng-content to correctly receive input arguments on initial load.
Template:
<div id="alert-card">
<div>
<div class="iconDiv" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
<mat-icon *ngIf='this.alertType === "Warning"' class="warningIcon" aria-hidden="false" aria-label="Warning">warning</mat-icon>
<mat-icon *ngIf='this.alertType === "Error"' class="errorIcon" aria-hidden="false" aria-label="Error">error</mat-icon>
<mat-icon *ngIf='this.alertType === "Info"' class="infoIcon" aria-hidden="false" aria-label="Info">info</mat-icon>
<mat-icon *ngIf='this.alertType === "Confirm"' class="confirmIcon" aria-hidden="false" aria-label="Confirm">check_circle</mat-icon>
<span><span class="alertType">{{ alertKeyword }}</span>{{ alertMessage }} </span>
</div>
<ng-content select="[cardContent]"></ng-content>
</div>
</div>
Component:
import {
Component,
Input,
ViewEncapsulation,
} from '#angular/core';
#Component({
selector: 'alert-card',
templateUrl: './alert-card.component.html',
styleUrls: ['./alert-card.component.scss'],
encapsulation: ViewEncapsulation.None,
})
// Displays the alert card
export class AlertCardComponent {
// The type of alert
#Input()
alertType: AlertType;
// The keyword at the start of the alert message
#Input()
alertKeyword: string;
// The alert message to display
#Input()
alertMessage: string;
constructor() {}
}
// Indicates a type of alert which has an associated icon and color scheme in the CSS
export enum AlertType {
Warning = "Warning",
Error = "Error",
Info = "Info",
Confirm = "Confirm",
}
Story:
import { componentWrapperDecorator, Meta, Story } from '#storybook/angular';
import { AlertCardComponent, AlertType } from './alert-card.component';
export default {
component: AlertCardComponent,
decorators: [componentWrapperDecorator(AlertCardComponent)],
} as Meta;
const Template: Story = (args) => ({
props: args,
template: `
<div cardContent
style="padding:10px"
fxLayoutAlign="center">
Arbitrary HTML content can go in this area
</div>
`
});
export const Warning = Template.bind({});
Warning.args= {
alertType: AlertType.Warning,
alertKeyword: "Warning: ",
alertMessage: "something has happened!"
};
This is nearly working as expected, but within the story, the component loads without any of the input arguments:
If I change any of the Storybook controls, the input arguments are passed and the component displays as expected:
I feel like I'm missing something obvious. Everything works as expected once I start manipulating the controls within Storybook, but how do I get the input arguments passed on initial load?
I'm also having what I believe are related issues on Storybook's Docs page. The component is displayed as it would without any arguments passed regardless of how the inputs are controlled.
Anyone run into this issue using a #with?
// Code in the calling template, Helper here just used to pass parameters a sub template
{{#with inputControlCheckboxHelper "middleName" "Middle Name" "" "middleNameDNA" "Address" "Alexander"}}
{{> inputControlCheckbox}}
{{/with}}
// Just passing in parameters with this helper
Template.registerHelper("inputControlCheckboxHelper",
function (inputName, inputTitle, inputSubTitle, checkboxName, templateName, inputPlaceHolder) {
return {
fieldName: inputName,
title: inputTitle,
subTitle: inputSubTitle,
checkbox: checkboxName,
template: templateName,
placeHolder: inputPlaceHolder
};
});
// The sub template, this calls another helper
<template name="inputControlCheckbox">
{{#with shouldBeDisabled template checkbox}}
{{> afFieldInput name=../fieldName}}
{{/with}}
{{> afFieldInput name=checkbox type="boolean-checkbox"}}
</template>
// The template to check if the input above should be disabled.
Template.registerHelper("shouldBeDisabled", function (formName, checkBoxName) {
var checkBox = AutoForm.getFieldValue(formName, checkBoxName);
if (checkBox === true) {
return {disableMe: true, notApplicable: "N/A"};
}
else if (checkBox === false) {
return {disableMe: false, notApplicable: ""};
}
else if (checkBox === "") {
return {disableMe: false, notApplicable: ""};
}
});
In the Chrome console, the stack trace looks like so:
If I remove the {{#with shouldBeDisabled template checkbox}} line, I get no exception. Also, even with the exception, everything renders find and the checkbox works with the input.
I'm using Iron Router 1.0.1, Meteor 1.0, and Autoform 4.0.1
Update to Autoform 4.0.2 solved the issue.