I tried to open a different page in vuetify, using window.open (http://url) and after an action return to the primary window to update it with some data.
However, I need to open the page in a modal. And window.showModalDialog() isn't work
I am using the following features:
"dependencies": {
"axios": "^0.16.1",
"devour-client": "^1.4.3",
"lodash": "^4.17.4",
"papaparse": "^4.3.3",
"vee-validate": "^2.0.0-rc.27",
"vue": "^2.2.6",
"vue-i18n": "^7.0.5",
"vue-kindergarten": "^0.3.0",
"vue-moment": "^2.0.2",
"vue-router": "^2.5.3",
"vue2-dropzone": "^2.0.0",
"vuetify": "^0.12.7",
"vuex": "^2.3.1",
"vuex-router-sync": "^4.1.2"
},
I am making an Oauth2 to Clio App connection, using a backend as a middleware that generates the authentication token.
Any idea of how to open an html page in a dialog and return to the primary window, updating data?
what about using the Vuetify v-dialog component, and for its content, have an iframe with your HTML page? Like this.
<v-dialog v-model="dialog" width="100%">
<v-btn color="primary" dark slot="activator">Open Dialog</v-btn>
<v-card>
<iframe style="width:100%" src="https://vuetifyjs.com"></iframe>
</v-card>
</v-dialog>
Related
I have a project in vuejs which bootstrap is already installed. I am using html, css project and converting into vuejs which bootstrap classes are used. However, dropdown bootstrap classes are not working for example, the below classes are not adding Show class when its getting clicked and normal html file is showing show class.
dropdown-toggle
dropdown-menu
I have
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"#popperjs/core": "^2.11.5",
Can someone please suggest something?
Thanks
Use show or shown
The in Bootstrap-Vue doesn't have a click event, but it does emit a show event shortly before the dropdown appears, including when it's clicked.
It immediately follows.
<b-nav-item-dropdown #show="doSomething">
Your code:
<b-nav-item-dropdown text="nav_title" #show="doSomething">
<b-dropdown-item href="#">
a
</b-dropdown-item>
<b-dropdown-item href="#">
a
</b-dropdown-item>
</b-nav-item-dropdown>
methods: {
doSomething() {
console.log('shown');
}
}
(You didn't find information for it on Vue's site because they didn't make the library.)
i have this component, its a simple component, but does not render, just i see words "Sales", i need to install another library?
<template>
<v-app>
<v-container>
<v-row dense align="stretch">
<v-col cols="4">
<v-card min-height="100%">
<v-card-text class="green--text">
<h5 class="text-truncate text-uppercase">Sales</h5>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script>
export default {
name: 'Taps',
setup() {
},
}
</script>
my dependencies are:
"vue": "^3.2.20",
"vue-router": "^4.0.0-0",
"vue3-perfect-scrollbar": "^1.5.5",
"vuex": "^4.0.0-0",
Unfortunately Vuetify does not yet support Vue 3.
The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3. When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project.
You'll need to downgrade your Vue version or choose a different component library. Quasar is a great alternative to Vuetify with lots of the same components and features.
Edit2: I found out the answer to this, you might also miss this one out if you're just starting on vuetify, or that you just directly dive into it and integrate it into an existing project without reading its documentation like me 😎. Vuetify won't work if it's not inside the application tag or <v-app> tag. So make sure if you're using a layout, that you wrap your code inside the v-app tag, the stylings may apply, but the functionalities won't work if you did not wrap using the application tag.
Original Question:
I can't seem to be able to make the the v-autocomplete work in any of my project, I tried it in 2 different projects, one installed using npm, and the other installed using the nuxt-create. I even copied the code from their demo on their website, but that didn't work too. These are the package version for each project:
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"vuetify": "^2.5.5"
},
and
"devDependencies": {
"#nuxtjs/vuetify": "^1.12.1",
"#vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"nodemon": "^1.18.9",
"vue-jest": "^4.0.0-0"
}
I can see the v-menu and the list in my array when I inspect element but it has a default style of display: none;, and because of that, even if I clicked or start typing, the array of supposed autocompletes wouldn't show.
So my question would be, how do I make it to work like how it's supposed to work in the demo on their website?
Edit1: I found out a little quirk about this, It would now work, but only on pages with default layout. So when I set a custom layout, like this one, layout: 'sidebar-layout', on the /device page, the v-autocomplete's dropdown would never open, unless I set the div class v-menu using element inspector in my browser. I haven't yet found out what's causing this, could either be in the layout or the component called into it.
You maybe forgot to add the script part?
The following code as in the example in the docs, totally works on my side
<template>
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12">
<v-autocomplete
v-model="values"
:items="items"
outlined
dense
chips
small-chips
label="Outlined"
multiple
></v-autocomplete>
</v-col>
<v-col cols="12">
<v-autocomplete
v-model="values"
:items="items"
dense
chips
small-chips
label="Solo"
multiple
solo
></v-autocomplete>
</v-col>
<v-col cols="12">
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
values: ['foo', 'bar'],
value: null,
}),
}
</script>
Here is a working github link if you need a confirmation.
yarn && yarn dev and everything should work fine.
I don't know if this is silly or not, but the fix for this was to make sure that your code inside your layout.vue file is wrapped inside a <v-app> tag.
So this was the layout that was causing the issue:
<template>
<div class="main__container">
<div class="sidebar__container">
<Sidebar />
</div>
<div class="main__content">
<Nuxt />
</div>
</div>
</template>
After comparing to the vuetify's default layout, that one had all of it's code wrapped inside a <v-app> tag, (which I clearly missed, since I just started using vuetify and immediately used it on an existing project). So after wrapping my layout with <v-app> it now worked:
<template>
<v-app>
<div class="main__container">
<div class="sidebar__container">
<Sidebar />
</div>
<div class="main__content">
<Nuxt />
</div>
</div>
</v-app>
</template>
Thanks for the answers.
I am using Bootstrap Vue and I have a dropdown like so
<b-nav-item-dropdown right>
<b-dropdown-item class="company-menu-text" :to="{ name: 'locationlist' }" exact>Lokaliteter</b-dropdown-item>
<b-dropdown-item class="company-menu-text" #click="logout">Logg ut</b-dropdown-item>
</b-nav-item-dropdown>
where Vue Router nicely takes me to the locationlist when I click there as expected. Not so nice is that the active class is then assigned to the dropdown item. I would like this not to happen ever. The best I have been able to get is to limit it with exact. How can I make sure that the active class is NEVER assigned to this dropdown item?
Versions I'm using of the relevant packages:
"bootstrap": "4.1.1",
"bootstrap-vue": "2.0.0-rc.11",
"vue": "2.5.16",
"vue-router": "3.0.1",
The hack that got the look I wanted was to modify the dropdown-item CSS:
.dropdown-item.active, .dropdown-item:active {
color: #000000;
text-decoration: none;
background-color: #ffffff;
}
but I still think that there must be a solution so that I don't set links to active. Because I have links other places than just in this dropdown menu, and don't think writing a ton of CSS is the right answer.
Using cypress in #vue/cli 4.0.5 app I faced a problem how to fill vue-select component
Searching in net I found this
How to find element and select by cypress.io with vue.js v-select?
branch, but the way proposed here does not work.
Having component defind :
<v-select
v-model="selection_parent_id"
label="label"
:options="categoriesLabels"
id="parent_id"
name="parent_id"
class="form-control admin_control_input editable_field"
placeholder="Select option"
data-cy='select-input'
></v-select>
I tried to add line in cypress test :
cy.get('[data-cy=select-input]').select('1')
and got error :
CypressError: cy.select() can only be called on a <select>. Your subject is a: <div dir="auto" class="v-select form-control admin_control_input editable_field vs--single vs--searchable" id="parent_id" name="parent_id" data-cy="select-input">...</div>
"vue": "^2.6.10",
"vue-select": "^3.2.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"bootstrap": "^4.3.1",
"faker": "^4.1.0",
"jquery": "^3.4.1",
Is there is a valid way ?
Thanks!
I found a dicision with key down / enter keys sent :
cy.get('#parent_id').click().type('{downarrow}{enter}')
That works for me!