vuejs3

问题 I am designing an architecture for the Vue 3 app with distributed module-based ownership. Module system will be represented with plugins (seems like the most appropriate solution allowing vuex module and vue-router dynamic injects). Each such module/plugin will be developed by dedicated team working within isolated repos. We cannot use npm package-per-plugin approach as deployment process should be isolated as well, and with npm approach core app team will have to rebuild app each time npm

问题 I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console. Here are my code snippets main.js import { createApp } from 'vue'; import App from './App.vue'; import VueI18n from 'vue-i18n' import router from './router/index' function loadLocaleMessages () { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const

问题 I've just started working with Vue.js and learning it through some online code snippet and tutorials. I'm trying to implement internationalization support for my vue project, but I'm getting error in web-console. Here are my code snippets main.js import { createApp } from 'vue'; import App from './App.vue'; import VueI18n from 'vue-i18n' import router from './router/index' function loadLocaleMessages () { const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const

问题 I have a ref : const editItem = ref<object | null>(null) Here's an example value for it: { id: 1, title: 'Harry Potter', author: 'J.K. Rowling', created: '30-08-2000', } If I run console.log(editItem.value) , I see this object: But when I try to read the value's author with console.log(editItem.value.author) , then I see this error: Object is possibly 'null'. 回答1: Since the type of the ref is object | null , it could be null when you access it, leading to a runtime exception. The error

问题 Learning vuejs3 I created new @vue/cli app with command vue create myapp with vuejs 3 selected I added Router to my project and added Router reference in my src/main.js : import { createApp } from 'vue' import { createRouter/*, createWebHistory */ } from 'vue-router' import WelcomeScreen from './pages/WelcomeScreen.vue' import UsersList from './pages/UsersList.vue' import App from './App.vue' const router = createRouter({ // history: createWebHistory(), mode: 'history', routes: [ { path: '/',

问题 I have an object that I want to access from all my web app pages. I am using Vue 3 reactivity but I have noted that in some instances, I have to refresh the page to get the object. How do I refactor my code to have the object always? See my code below: import { reactive, watch } from "vue"; import getSchoolDocuments from "../composables/getSchoolDocuments"; import { projectAuth } from "../firebase/config"; let user = projectAuth.currentUser; let userId; if (!user) { userId = localStorage

问题 i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How??? const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false }) const handleSave = () => { const group = toRaw(newGroup) persist(group).then(() => { newGroup.id = undefined newGroup.name = 'demo' console.log(isReactive(group)) //say false but the group.name value is demo }) } destructuring

问题 i've a reactive object, on the save function i call toRaw in order to remove de object reactivity, but, when i change the reactive object props, also the group object is changing.... How??? const newGroup = reactive<Group>({ id: undefined, name: '', enabled: false }) const handleSave = () => { const group = toRaw(newGroup) persist(group).then(() => { newGroup.id = undefined newGroup.name = 'demo' console.log(isReactive(group)) //say false but the group.name value is demo }) } destructuring

问题 Using Vue with Typescript makes it possible to specify types for props: Strongly typing props of vue components using composition api and typescript typing system However, as far as I can see these props are only checked at runtime. Here's a simple example component. It has two props a , and b . One is a number and the other a string. Additionally b has a validator, it is only valid if it's equal to hi <template> <p>{{a}}</p> </template> <script> import {defineComponent} from 'vue'; export

问题 Using Vue with Typescript makes it possible to specify types for props: Strongly typing props of vue components using composition api and typescript typing system However, as far as I can see these props are only checked at runtime. Here's a simple example component. It has two props a , and b . One is a number and the other a string. Additionally b has a validator, it is only valid if it's equal to hi <template> <p>{{a}}</p> </template> <script> import {defineComponent} from 'vue'; export