Im trying to show a Modal if the open prop is true but for some reason Im getting undefined instead of False (Boolean)
<script>
import { ref } from 'vue';
import Modal from '#/components/Modal.vue';
export default {
components: {
Modal
},
setup() {
const isOpen = ref(false)
return { isOpen }
}
}
</script>
<template>
<div>
<Modal :open="isOpen">Some Text</Modal>
</div>
</template>
This is the error:
[Vue warn]: Invalid prop: type check failed for prop "open". Expected Boolean, got Undefined
at <Modal open=undefined onClose=fn >
at <Dashboard>
at <Developers errors
Im using: Laravel 9, ViteJs, Vue3.
Related
Searched all over SO, very little information.
The store:
import { defineStore } from 'pinia'
import axios from 'axios'
export const useScanStore = defineStore({
id: 'scan',
state: () => ({
scans: [],
scan : null,
loading: false,
error: null,
messages : []
}),
getters: {
getScans : state => state.scans,
},
subscriptions: {
},
actions: {
async updateScan(id,data) {
// code here that works
}
// trimmed for shortness
}
THE COMPONENT
<template>
<div>
<q-btn color="orange" text-color="white" size="sm" #click="stopScan" class="q-mr-sm">
STOP
</q-btn>
</div>
</template>
<script setup>
import {useScanStore} from "#/stores/scan";
const scanStore = useScanStore();
// trimmed
async function stopScan(id){
const rerunResponse = await scanStore.updateScan(id, {status: 'failed'}) //<<< ERROR HERE
}
</script>
The frustrating part is that THIS EXACT code works in other component. So that function DOES exist.
It's imported IDENTICALLY in component where it works.
Error points at that line in function.
Why am I getting this error? I reduced component to just a single function, button and call.
There are NO OTHER ERRORS in console. Just this (when button is pressed):
I ended up destroying and rebuilding my docker compose (Docker image) and it started working.
I'm trying to import Quill Editor into a Nuxt3 project and want to use it in a componenent.
This is what I am trying to do:
QuillEditorWrapper.client.vue
<script>
import '../node_modules/#vueup/vue-quill/dist/vue-quill.snow.css';
export default {
name: 'NotQuillEditor',
setup() {
if (process.client) {
const { QuillEditor } = import('#vueup/vue-quill');
return { QuillEditor };
}
},
};
</script>
<template>
<h1>Quill Editor</h1>
<QuillEditor theme="snow" toolbar="full" /> <!-- same for <quill-editor> -->
</template>
This mounts the component but does not launch quill editor. The following vue warning is displayed:
[Vue warn]: Failed to resolve component: QuillEditor
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
A full reproduction is available here: https://stackblitz.com/edit/github-qsdpjt-me572c?file=components/QuillEditorWrapper.client.vue
I'm trying to use the useArgs() hook to update args. Since #storybook/client-api is deprecated, I'm using the #storybook/api library instead. However, it throws a TypeError when I try to use it in a template:
import { useArgs } from "#storybook/api";
import Button from "./Button";
export default {
title: "Button",
component: Button,
} as ComponentMeta<typeof Button>;
const ToggleTemplate: ComponentStory<typeof Button> = (args) => {
const [_, updateArgs] = useArgs();
return <Button {...args} />;
};
export const Toggle: typeof Template = ToggleTemplate.bind({});
Toggle.args = {
children: "Toggle me!",
toggle: {
toggleFunc: () => {},
value: false,
},
};
The above throws TypeError: Cannot read properties of undefined (reading 'getCurrentStoryData'). When I comment out useArgs(), the error disappears. Does anyone know what I'm doing wrong?
You are using the useArgs from the wrong package. The #storybook/api is for creating an addon, not using it in a story (Storybook Docs: Addon API). For inside a story, install #storybook/client-api and change the import to import { useArgs } from '#storybook/client-api';
I'm trying to use CodeMirror on Vue3 and the problem occurs when I call doc.setValue().
The Problem is following:
Cursor position is broken when doc.setValue() is called
CodeMirror throws an exception when continuing editing
The exception is here.
Uncaught TypeError: Cannot read property 'height' of undefined
at lineLength (codemirror.js:1653)
at codemirror.js:5459
at LeafChunk.iterN (codemirror.js:5623)
at Doc.iterN (codemirror.js:5725)
at Doc.iter (codemirror.js:6111)
at makeChangeSingleDocInEditor (codemirror.js:5458)
at makeChangeSingleDoc (codemirror.js:5428)
at makeChangeInner (codemirror.js:5297)
at makeChange (codemirror.js:5288)
at replaceRange (codemirror.js:5502)
How should I solve this?
~~~
Versions are CodeMirror: 5.61.1, Vue.js: 3.0.11
My code is following:
index.html
<div id="app"></div>
<script src="./index.js"></script>
index.js
import { createApp } from 'vue';
import App from './App';
const app = createApp(App);
app.mount('#app');
App.vue
<template>
<div>
<button #click="click">Push Me</button>
<textarea id="codemirror"></textarea>
</div>
</template>
<script>
import CodeMirror from 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// import codemirror resources
import 'codemirror/addon/mode/overlay.js';
import 'codemirror/mode/markdown/markdown.js';
import 'codemirror/mode/gfm/gfm.js';
export default {
data () {
return {
cm: null
}
},
mounted () {
this.cm = CodeMirror.fromTextArea(document.getElementById('codemirror'), {
mode: 'gfm',
lineNumbers: true,
});
},
methods: {
click (event) {
this.cm.getDoc().setValue('foo\nbar');
}
}
}
</script>
Thanks.
UPDATES
First, this problem also occurs when I used replaceRange() with multiline.
Unfortunately, I couldn't find any solution. So I tried to find another way.
My solution is recreating Codemirror instance with a textarea that has new content.
It works well.
// Remove old editor
this.cm.toTextArea();
// Get textarea
const textarea = document.getElementById('codemirror');
// Set new content
textarea.value = 'foo\nbar';
// Create new editor
this.cm = CodeMirror.fromTextArea(textarea, { /** options */ });
I found a method, you can use toRaw to get the original Object from Proxy,and this method can be also used in monaco-editor
import { toRaw } from 'vue'
import CodeMirror from 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// import codemirror resources
import 'codemirror/addon/mode/overlay.js';
import 'codemirror/mode/markdown/markdown.js';
import 'codemirror/mode/gfm/gfm.js';
export default {
data () {
return {
cm: null
}
},
mounted () {
this.cm = CodeMirror.fromTextArea(document.getElementById('codemirror'), {
mode: 'gfm',
lineNumbers: true,
});
},
methods: {
click (event) {
toRaw(this.cm).setValue('foo\nbar');
}
}
}
Another way,you don't have to define cm in data, just use this.cm
data () {
return {
//cm: null
}
},
I have a component that has an image attribute with the component.
What is the best way to test the image attribute?
Test:
test("Menu has a background image called bg.png", () => {
const menu = shallow(
<Menu />
);
expect(menu.find('.menu-bg').prop('style')).toHaveProperty('background', "url('images/bg1.png')");
});
Menu Component:
export default class Menu extends React.Component {
render() {
return <div className="menu-bg" />;
}
}
Style:
.menu-bg{
background: url('images/bg1.png');
}
I'm getting the current error:
Matcher error: received value must not be null nor undefined
Received has value: undefined