vue-component

unable to import js file in visual studio code

久未见 提交于 2020-06-16 04:34:11
问题 as you can see I tried to import the js from src/services I tried the following path but none of them working. ./services/member.service /@services/member.service member.service Previously I used /@store/member.service for my others Vue project but somehow it is not working in vue native my member.service.js 来源: https://stackoverflow.com/questions/62316308/unable-to-import-js-file-in-visual-studio-code

NuxtJS - Use asyncData method in layout or component

天大地大妈咪最大 提交于 2020-06-13 06:49:11
问题 How I can use asyncData in layout or component ( forbidden apparently ) ? Because my sidebar component is used in default layout, and I need to use asyncData to display data from backend. And if I use Vuex to fetch data... I don't know how I can fetch this with global on every page. My layout component annotation: @Component({ components: { LeftDrawer }, async asyncData({ app }) { const latestPosts = await app.$axios.get(`/posts/latest`); return { latestPosts: latestPosts.data, }; } }) 回答1:

NuxtJS - Use asyncData method in layout or component

故事扮演 提交于 2020-06-13 06:49:07
问题 How I can use asyncData in layout or component ( forbidden apparently ) ? Because my sidebar component is used in default layout, and I need to use asyncData to display data from backend. And if I use Vuex to fetch data... I don't know how I can fetch this with global on every page. My layout component annotation: @Component({ components: { LeftDrawer }, async asyncData({ app }) { const latestPosts = await app.$axios.get(`/posts/latest`); return { latestPosts: latestPosts.data, }; } }) 回答1:

Vue.js change placeholder of text input according to v-model value

人走茶凉 提交于 2020-06-11 06:02:08
问题 I need to change placeholder of a text input via Vue.js data binding. Here is my code. <select2 :options="power_options" v-model="power"> <option selected value="hp">hp</option> <option value="kW">kW</option> </select2> <input name="power_to" type="text" class="form-control pwer_change" v-model="power_from" placeholder='[[ power ]]' style="display: inline;width: 48%;"> <input name="power_from" type="text" class="form-control pwer_change" v-model="power_to" placeholder="[[ power ]]" style=

How can I make title bar dynamic on vuetify?

社会主义新天地 提交于 2020-06-01 05:41:27
问题 I see vuetify project have title bar. But the title in public/index.html. Outside src folder So I had trouble making it dynamic. Every page must have different title. If it's same, it's very influential on SEO My public/index.html like this : <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>test-vuetify</title>

Use current vue component's method as default prop value

瘦欲@ 提交于 2020-05-29 05:37:08
问题 I am going to pass function as property to Vue component. Let it be function has to be invoked by @click . But for some reasons I want to keep default behaviour for the component. The default behaviour is not so easy as I want and I'm going to use method as default function. Because the default behaviour requires data from component's state (props, data, other methods, whatever). Is there a way to do? I've attached the example. Expected behaviour: Button works fine should produce alert You

Vue-router component reusing

我的梦境 提交于 2020-05-29 03:23:29
问题 I would like to know how can I stop component reusing in Vue-router. I'm building a simple page application and I am unable to update data after clicking the same link twice. Is it possible to somehow force reloading or what are the best practices in my situation? 回答1: Use the key attribute on router-view set to current url. It's built in, so no need to write any code. <router-view :key="$route.fullPath"></router-view> 回答2: Vue Router reuses the same component therefore the mounted hook won't

Vue-router component reusing

霸气de小男生 提交于 2020-05-29 03:22:30
问题 I would like to know how can I stop component reusing in Vue-router. I'm building a simple page application and I am unable to update data after clicking the same link twice. Is it possible to somehow force reloading or what are the best practices in my situation? 回答1: Use the key attribute on router-view set to current url. It's built in, so no need to write any code. <router-view :key="$route.fullPath"></router-view> 回答2: Vue Router reuses the same component therefore the mounted hook won't

Vue 3 composition API and access to Vue instance

女生的网名这么多〃 提交于 2020-05-15 01:00:26
问题 In main.js I have something like this: import { myUtilFunc} from './helpers'; Object.defineProperty(Vue.prototype, '$myUtilFunc', { value: myUtilFunc }); In this way I have acess to myUtilFunc across whole application with this.$myUtilFunc But how can I achieve the same in setup() method in Vue 3 if I don't have access to this ? 回答1: In Vue 3, setup has an optional second argument for context . You can access the Vue instance through context.root instead of this : setup(props, context) {

access store outside of component vuejs

為{幸葍}努か 提交于 2020-05-10 03:53:22
问题 I have a file for configuring my OpenID Connect authentication export const authMgr = new Oidc.UserManager({ userStore: new Oidc.WebStorageStateStore(), authority: **appsetting.oidc** }) I want to access my state in order to get the value of appsetting. I did this: import store from './store' const appsetting = () => store.getters.appsetting but my appsetting is always returning undefined what I my missing? Store: app.js const state = { appsetting: appsetting, } export { state } getters.js