vuejs3

问题 I am struggling with vue-router not scrolling/navigating to anchor tags (ex: #anchor ). I have read various solutions here on Stack Overflow, but none have worked so far. Please find below the code I am using right now, which is not working: main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/docs/1.0/:title", component: Content, name: "docs" } ], scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } if (to.hash) { return {

问题 I am struggling with vue-router not scrolling/navigating to anchor tags (ex: #anchor ). I have read various solutions here on Stack Overflow, but none have worked so far. Please find below the code I am using right now, which is not working: main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/docs/1.0/:title", component: Content, name: "docs" } ], scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } if (to.hash) { return {

问题 the problem has been solved, read through the question to see how step by step fix the problems I read about composition api(https://vue-composition-api-rfc.netlify.com/#api-introduction), and tried to convert my existing code which is based on typescript on Option api in vuejs, and i failed to make it work, and kinda confused about how composition api really work. my working code is below: <script lang="ts"> import Vue from "vue"; import {inputFields} from "@/mixins/inputField/inputField";

问题 I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't

问题 I'm trying to set up Vue 3 with TypeScript and class-based components. However, I keep getting on error on importing the Component decorator the Vue constructor: This expression is not callable. Type 'typeof import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")' has no call signatures. Vetur(2349) mycode.vue: <script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component // 1st Error '@Component' export default class ProdItem

问题 I'm trying to set up Vue 3 with TypeScript and class-based components. However, I keep getting on error on importing the Component decorator the Vue constructor: This expression is not callable. Type 'typeof import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")' has no call signatures. Vetur(2349) mycode.vue: <script lang="ts"> import Vue from 'vue' import Component from 'vue-class-component' @Component // 1st Error '@Component' export default class ProdItem

问题 I have these files App.vue, Header.vue, search.js and Search.vue App.vue is normal and just adding different views Header.vue has an input box <input type="text" v-model="searchPin" @keyup="searchResults" /> <div>{{searchPin}}</div> and script: import useSearch from "@/compositions/search"; export default { name: "Header", setup() { const { searchPin, searchResults } = useSearch(); return { searchPin, searchResults }; } }; search.js has the reusable code import { ref } from "vue"; export

问题 I have setup a Vuex store and router in Vue. Depending on a piece of state within this store, I would like the router to render a different component for the same path. Below is my attempt at doing this. Within my router, I include a conditional that is saying "if the user is logged in, return Home , otherwise return Login ". Within my Login component, I change the value of my loggedIn state (within the Vuex store) to true when the user successfully logs in. I have tested and can see this

问题 I set up a Vuex store with getters,state and etc but I can't get the data from the store on my app component. my current code gives me this "Unexpected token <". App.vue <template> ... </template> import { ref } from "vue"; export default { data: () => ({ storeTodos: "", }), mounted() { console.log(this.$store); // this.storeTodos = this.$store.getters.getTodos; }, ... Main.js import Vue, { createApp } from "vue"; import App from "./App.vue"; import Vueex from "vueex"; Vue.use(Vueex); export

问题 With Vue Router version 4 , which is currently in beta.11 in vue-router-next repo, there is a documentation page about how to define meta fields custom type interface with TypeScript . declare module 'vue-router' { interface RouteMeta { // is optional isAdmin?: boolean // must be declared by every route requiresAuth: boolean } } To be placed along the Vue shim module declaration. Mine is looking like: declare module '*.vue' { import { defineComponent } from 'vue'; const component: ReturnType