I am just new to vue and working on this example Notes application, it can be found below
https://coligo.io/learn-vuex-by-building-notes-app/
My question is how can I change component seen on screen right behind the toolbar. I have read basic guide but I am still behind it.
Lets say I have a button on left side call it message and have another component listing like NotesList and its called MessagesList. So, When I click message button, I want NotesList dissappear and MessageList come instead of that, and vice versa. I do not want NotesList stay as consistent on screen.
Here is App.vue and main.js files, please look in github page for mode code.
https://github.com/coligo-io/notes-app-vuejs-vuex
<template>
<div id="app">
<toolbar></toolbar>
<notes-list></notes-list>
<editor></editor>
</div>
</template>
<script>
import Toolbar from './Toolbar.vue'
import NotesList from './NotesList.vue'
import Editor from './Editor.vue'
import MessageList from './MessageList.vue'
export default {
components: {
Toolbar,
NotesList,
Editor,
MessageList
}
}
</script>
Main.js
import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
new Vue({
store, // inject store to all children
el: 'body',
components: { App }
})
You could do this either by using v-if on each of the components, or by using dynamic components. In either case, your button should toggle a data value which would be used to control which component is displayed.
Related
The dynamically created Dialog is mounted under the <body> tag by default, so that the global Provide and Inject cannot be used. How can Dialog be mounted under div#app or mounted under parent ?
It is always mounted either under <body> (non-SSR) or nowhere (SSR mode) - not just "by default". Just look at the sources - https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private/global-nodes.js#L6
You can setup the provide on the Vue app, using app.provide() instead of an <App/> component. For example, in the entry script
import { createApp } from 'vue'
import { Quasar, Dialog } from 'quasar'
import App from './App.vue'
createApp(App)
.provide('name', value)
.use(Quasar, {
plugins: {
Dialog,
}
})
.mount('#app')
Then you will be able to use inject() the same item in Quasar dialog children, even though the dialog is mounted under <body>.
I have created a ionic vue 3 tabs starter application.
Im trying to to switch tab programmatically from one tab to another
here is my situation
// in Tab1.vue page
setup(props, context) {
function moveToTab3(){
// here I need the code to switch tab1 to tab3
// possible to call tabs.select() method here ?
}
}
// my Tabs.vue page
<ion-tabs ref="tabs" >
I searched in the ionic docs and vue docs to know how to get the parent component from a child component, I have not got a solution yet.
any help is much appreciated, Thank you so much
yes you can absolutely do that programmatic routing provided you have access to Vue-Router because ionic under the hood uses Vue router for navigation and since tabs are top-level navigation you can simply call
$router.push OR $router.replace inside of your setup function on button click or bind the tab using router-link
Here is the documentation from Ionic related to Navigation/Routing Link And
I think this is what you are looking for Accessing The Ionrouter Instance Link
=====Update =====
Taken directly from the documentation Link, As you can see in the template on Ion-Button a simple #click is used to push the route you wish to navigate, while in script tag useRouteris accessed from the core vue-router to get access to the underlying router
<template>
<ion-page>
<ion-content>
<ion-button #click="() => router.push('/detail')">Go to detail</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonButton, IonContent, IonPage } from '#ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'HomePage',
components: {
IonButton,
IonContent,
IonPage
},
setup() {
const router = useRouter();
return { router };
}
})
</script>
The same link also shows how you use router-link on Ion-Button
<ion-button router-link="/detail">Go to detail</ion-button>
without having to tap into a method.. either way, works...
I have a problem with my VUE js project. I use the library VueperSlides and it's run correctly but my problem, is that the slider is imported in the components App.vue and it's displayed. I want to display the slider only in my Slider component.
I have a router link which runs correctly.
This is the APP.VUE component
This the HomePage (I want to put away this slider )
This is the Slider Vue
Just import it on your HomePage.vue:
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
export default {
components: {
VueperSlides,
VueperSlide
},
// ...
}
Then use vueper-slides and vueper-slide components on your template.
my main.js file has the following
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import { routes } from '../src/router/routes';
Vue.use(TurbolinksAdapter);
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode: 'history'
});
document.addEventListener('turbolinks:load', () => {
var element = document.getElementById('vue_code');
if (element != null) {
new Vue({
el: '#vue_code',
Store,
router,
render: h => h(EventIndex)
});
My routes.js file has the following:
import Vue from "vue/dist/vue.esm";
import VueRouter from "vue-router";
import EventForm from "../components/EventForm";
Vue.use(VueRouter);
const routes = [
{
path: "/events/new",
name: "EventForm",
component: EventForm
}
];
The router-link snippet from my component file EventsTable.vue file has the following:
<template lang=haml>
...
%tbody
%tr{v-for: "event in events"}
%td
%router-link.fa.fa-pencil{to: "/events/new"}
%router-view
...
<template>
<script>
import EventForm from './EventForm';
components: {
EventForm
}
</script>
When I click on the link, i expect the page to change to the EventForm page. Instead, the url changes, but the browser window does not change. But once I reload the page, the browser jumps to the EventForm page.
Any help is appreciated. Thanks
The first line of the vue-turbolinks package states:
⚠️ If you're using vue-router or another Javascript routing library, you don't need to use Turbolinks or this adapter. Turbolinks is meant to level up the traditional request-render cycle by loading the new page in the background and this adapter makes it possible to use Vue components on pages rendered in this manner. If you've decided to use a single-page app, you already have everything you need. 🤘
You cannot use vue-router and Turbolinks together. Turbolinks handles all of your site navigation. Navigating using vue-router doesn't work because it is attempting to do a history push instead of an entire page load.
I suggest programmatically routing using the Turbolinks.visit() function instead of using vue-router. You'll need to create a new view for the EventForm page that loads your vue component.
I created a vue dialog app/component using vue cli. It consist of a sample button to be clicked on to imitate how the dialog (What I need) will be loaded when a link on the existing application is clicked. I have a couple of issues.
When using v-app it adds the application wrapper I dont need seeing as its only the dialog I want. It creates a huge whitespace not needed. If I remove it, it errors [Vuetify] Unable to locate target [data-app] and the dialog wont load when <div #click='getInformation('USA')'></div> in the existing application is used.
Tried removing v-app and just using template but continues to error. Seems I need to still specify v-app in some way. Lost here
An example on how Im trying to pull it off but not working in App.vue
<template>
<div v-resize="onResize">
<v-dialog>
<v-card>
{{ information }}
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data() {
return {
isMobile: false,
information: []
};
},
methods: {
onResize() {
if (window.innerWidth < 425) this.isMobile = true;
else this.isMobile = false;
},
getInformatiom(country) {
axios
.get(`${api}/${country}/info`, {
headers: {
Authorization: `token`
}
})
.then(response => {
this.information = response.data.info;
});
}
}
};
main.js
import Vue from "vue";
import App from "./App.vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Dialog component is ready to go, just having so much trouble getting it to show when its being called from the existing application. Just a note, the existing application does not use Vue, its only classic asp, Im only updating the dialog on the page to look/work better using vue/vuetify. Any help would be GREATLY APPRECIATED
You NEED the v-app element with vuetify.
Try this to only use the app when showing the dialog. Then use CSS to customise the v-app.
<v-app v-if='this.information && this.information.length'>
<v-dialog>...</v-dialog>
</v-app>
I would use the max-width prop of v-dialog, make it dynamic by adding :max-width and then have that bound to a computed property which subscribes to your screen size. I would not try to control it from an external div. See here for full list of sizing options
https://vuetifyjs.com/en/components/dialogs