I need help implementing type checking for my dynamic component instead of relying on 'any' as a workaround. Can someone guide me through the proper way to achieve this?
<script>
...
interface {
[key: string]: any
}
const pages: page = {
Intro,
Play,
End,
}
</script>
<template>
<component :is="pages[state.page]" />
</template>
Component Type:Take advantage of Vue's Component type, ensuring that your interface is actively utilized. Moreover, ensure that the references to MyComponentList point towards a registered component.
<script setup lang="ts">
import type { Component } from 'vue'
import MyComponentA from "@/components/MyComponentA.vue"
import MyComponentB from "@/components/MyComponentB.vue"
import MyComponentC from "@/components/MyComponentC.vue"
interface IComponents {
[key: string]: Component
}
// Create a list of component items
const MyComponentList: IComponents = {
// Keys can potentially be without quotes, but this approach is more explicit and less confusing.
"MyComponentA": MyComponentA,
"MyComponentB": MyComponentB,
"MyComponentC": MyComponentC
}
</script>
Subsequently, within your template, specify a dynamic component name (SomeString) that should correspond to any key in MyComponentList, like "MyComponentA":
<component :is="MyComponentList[SomeString as keyof typeof MyComponentList]" />
Make sure to only use strings or Components as expected. To resolve this issue, import Component from Vue in your code.
<script setup lang="ts">
import { type Component } from 'vue';
interface {
[key: string]: Component
}
const pages: page = {
Intro,
Play,
End,
}
<script>
Give this a shot!
structure page {
Welcome: VueComponent;
Game: VueComponent;
Conclusion: VueComponent;
}
Seeking assistance for the following task: I am trying to create a new multidimensional array of objects based on an existing array of objects: [ {number:111, connectedNumber: 112, ...}, {number:112, connectedNumber: 111, ...}, {number:113, connectedNumbe ...
Issue Recap In Vue3, can Pinia getters be utilized as a watch target's first argument? System Details Vue version: 3.2.13 Pinia version: 2.1.4 TypeScript version: 4.5.5 Problem Description An error was encountered when attempting to reference the ...
I have a razor page model that contains a get-method. public IActionResult OnGetDuration([FromBody]int id) { Subject subject = _service.GetSubjectById(id); int duration = subject.LessonsPerWeek; return new JsonResult('a&apo ...
Recently, I came across an AJAX function in an open-source code that caught my attention. function edit_person(id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals //Ajax Load data from ajax $.ajax({ ...
My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...
Switch the keyboard language to a different one (in this case Japanese using alt + shift), and when typing in Monaco editor, an intellisense menu appears with options to remove and search. Monaco Editor Version: V0.33.0 https://i.stack.imgur.com/SIyeV.pn ...
I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...
Being familiar with creating a standard back button, I am now eager to craft one that directs the user back by one step in the URL rather than returning to the previous page. This way, I can utilize the button in various locations without needing to alter ...
My goal is to make a selected row move up and down on arrow clicks, and in order to achieve this, I need to retrieve rows from the MUI DataGrid. I am using the useGridApiRef hook to do so, ensuring that the rows are filtered and sorted accordingly to match ...
I am currently integrating masonry-layout from the official website to create a masonry grid within my component. However, I encountered an issue where clicking on a rendered element triggers the error message TypeError: matchesSelector is not a function. ...
Is there a way to dynamically pass Route params into the filtering fields of a React table component? I am currently utilizing the material-table component and have a list of links structured like this: <ul> <li> <Link to="/Products/ ...
In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...
While exploring code using jsbin, I mistakenly linked the iframe to . When my work in loads, it triggers an alert that redirects back to . I am unable to figure out how to modify my jsbin code. Is there a solution or should I start from scratch? ...
Allow me to explain how I define a computed value: Template : <date-picker v-model="rangeDate" type="date" format="jYYYY/jMM/jDD" display-format="jYYYY/jMM/jDD" input-c ...
I have a minor issue that has been keeping me up at night. I can't seem to shake it off and find the right solution! Currently, I am working with Bootstrap 4 as my Framework. My task is to create a full-page Carousel that cycles through images random ...
For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...
https://i.sstatic.net/XXm3W.png The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to ...
Here is a function that I've been working on: function findFirstValid(...values: any) { for (let value of values) { if (!!value) { return value; } } return undefined; } This function aims to retrieve the first ...
I am currently able to query the database by finding a specific key:value pair in the documents. However, I would like to enhance this functionality by allowing users to input their own search criteria as an argument in the function. Right now, I have hard ...
Within my react-router routes, I implemented plainRoutes in the following manner: getComponent (nextState, cb) { require.ensure([], (require) => { const CoreLayout = require('../layouts/CoreLayout/CoreLayout').default const u ...