How do you test a button's disabled attribute changing in vue test utils? The disabled attribute of the button depends on isFormValid and isFormModified. I've tried setting them to both true in my test, but it still receives a false.
Component
<v-btn
data-qa="reviewData"
#click="validateForm()"
:disabled="!(isFormValid && isFormModified)"
:color="primaryColor"
rounded
class="font-weight-regular text-none white--text px-7 mr-8 mt-3"
>
{ $t('accountMaintenance.review') }}</v-btn
Test
wrapper.setData({ isFormModified: true, isFormValid: true })
const button = wrapper.find('[data-qa="reviewData"]')
expect(button.attributes().disabled).toBe('false')
Related
Update 1
I tried the following as #kissu said but it didn't worked,
1.Adding the key directly in nuxt.config.js is not working :
chakra: {
extendTheme: {
breakpoints: ['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'],
}
},
Theme provider looks like this
<template>
<div class="container">
<CThemeProvider>
<CColorModeProvider>
<CBox font-family="body" as="main">
<CReset />
<siteHeader/>
<nuxt />
<siteFooter/>
</CBox>
</CColorModeProvider>
</CThemeProvider>
</div>
</template>
<script>
import {
CThemeProvider,
CColorModeProvider,
CReset,
CBox
} from '#chakra-ui/vue'
3.I tried applying classes corresponding to the breakpoints and also a custom color but it didn't helped too
<CBox bg="mpw.50" height="2rem" width="2rem">sadsad</CBox>
<CBox as="ul" list-style="none" d="flex" flexDirection="column">
<CBox as="li" list-style="none" borderBottom="2px solid #E8E8E8">
<CBox
:bg="[
'rebeccapurple','blue','yellow','orange','grey','#8B008B','#7FFF00'
]"
padding="1rem" d="flex" v-bind="mainStyles[colorMode]">
<CImage :src="require('#/assets/imgs/patient.png')" w="5rem" h="5rem" alt=""/>
<CBox flex="1 1 0" padding="1rem" paddingTop="0" paddingBottom="0" v-bind="mainStyles[colorMode]">
<CText fontSize="2xl" >
Home Isolation Patients
</CText>
<CText pr="0.5rem">
Lorem ipsum xyzzzz
</CText>
anything else that I should try now ?
Original Post is below
I am unable to extendTheme in Chakra UI in my NUXT JS app. I want to use my own breakpoints as per my designs, which means that I need to have more than 4 breakpoints in my app.
In my nuxt.config.js I am importing it and using like below :
import customTheme from './customTheme/custom-theme.js'
chakra: {
extendTheme : customTheme
},
The file custom-theme.js
console.log("LOADING CUSTOM THEME")
export default {
// '38rem', '48rem', '62rem', '80rem',
breakpoints:[ '89rem','86rem','90rem','120rem','200rem','300rem'],
colors:{
mpw:{
50:"#EBEBEB",
}
}
}
When I do console.log in my index.vue
mounted() {
if(process.server){
console.log("ON SERVER")
console.log(this)
}
if(process.client){
console.log("ON CLIENT")
console.dir(this.$chakra.theme)
}
},
then I don't see my custom breakpoints
How can I add my own set of breakpoints like those breakpoints:['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'] ?
I am building a web app using nuxt, vuetify 2.x, and typescript.
I want to upload file using v-file-input but have some issue upon selecting the same file.
For example, when I select some file and then close the dialog without saving it,
I cannot select the same file(i.e.#change is not firing)
what I have tried:
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetForm() {
(this.$refs.form as HTMLFormElement).reset();
},
resetImageUploader() {
(this.$refs.imageUploader as any).reset();
},
}
(resetForm() is called when dialog is closed)
I've tried resetting imageuploader when the input form is clicked, but it did not work.
I've tried (this.$refs.imageUploader as any).value = '' instead of reset() but it did not work.
Btw, When I select the file, clear icon appears like this
If I clear the form by clicking this icon, I can select the same file..
Does anyone have idea how I can solve this issue?
try to do like below to reset
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
:value="internalVal"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetImageUploader() {
this.internalVal = []
},
}
I am working on an app in Nativescript-vue. The app requires a user to be logged in. When started, the app checks appSettings for whether the user is logged in. If logged in, the user is directed to a menu of choices ("Home"). If user is not logged in, the app loads a login form which validates credentials against a remote DB and then directs the user to the very same menu ("Home").
In both situations, the user is directed to the exact same file, Home.vue. This page consists of 5 or so buttons, each with a FontAwesome icon.
The problem is that the app displays or does not display the icons depending on how the user ends up at the Home.vue menu.
Icons are not displayed when the user is directed on startup to Home.vue (aka appSettings variable shows user is logged in, thus doesn't have to present credentials). Note that drilling further into the app by clicking a button that takes you to another *.vue file that also uses buttons with embedded FontAwesome icons does work.
Icons are displayed correctly when the user is routed to the Home.vue file after presenting valid username / password credentials, both at the Home page and subsequent menus in the app.
MAIN.JS
import Vue from 'nativescript-vue'
// Font Awesome!
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/fontawesome.min.css',
'far': './assets/css/regular.min.css',
'fas': './assets/css/solid.min.css',
'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
import {UserServices} from "./assets/js/UserServices.js"
import Login from "./components/Login.vue";
import Home from "./components/Home.vue"
let user = new UserServices();
new Vue({
render: h => h('Frame', [
h(
(user.getLocalToken()) ? Home : Login
)])
}).$start();
HOME.VUE. (Very stripped down, but still exhibiting the stated behavior)
<template>
<Page class="page" #loaded="loaded">
<StackLayout>
<Button #tap="tapLogoutButton">
<FormattedString>
<Span
class="fas button-icon" stretch="none" :text="'fa-sign-out-alt' | fonticon"
/>
<Span
text=" Logout"
/>
</FormattedString>
</Button>
</StackLayout>
</Page>
</template>
<script>
import Login from "./Login";
import { UserServices } from '../assets/js/UserServices'
let u = new UserServices();
export default {
methods: {
tapLogoutButton(){
if (u.logout()){
this.$navigateTo(Login, {
clearHistory: true
});
};
},
}
};
</script>
Any insight into why the FA icons would appear on a single page (when loaded) depending on how the user ended up there?
You are trying use the plugin your first page before it's ready. loadCss() is an asynchronous function, returns a promise. You must make sure the promise is resolved before using the filter from plugin to render icons.
There are various ways you could solve this
If it's just couple icons in the home / login page, don't use the plugin, directly pass the font code.
you may create an event bus / state, that will hold a boolean value, set it to true upon resolving loadCss() method. Your Home & Login page can rely on the flag, may be with a v-if. It may be few milliseconds for the plugin to process the CSS files.
you may modify the plugin to optionally support synchronous loading,
perhaps even raise a pull request.
I solved this by using the unicode at the text attribute. Binding it to a Vue data.
At the template:
<Label class="fas" :text="file_privacy_police | fonticon"/>
At the <script> tag:
data() {
return {
address_book: "\uf2bb",
file_privacy_police: "\uf570"
};
},
But you can add the unicode directly at the text attribute:
<Label class="fas" :text="'\uf570' | fonticon"/>
This solved my not loading icons problem when already logged in and relaunching the app.
<v-img :src="getPhoto()" height="200px" width="200px"></v-img>
this is for photo to load from getphot function. the src has the url for facebook but vuetify doesnt load anything
computed: {
user () {
return this.$store.getters.user
}
},
methods: {
getPhoto () {
return this.$store.getters.user.photoUrl
}
}
i do not get any error. and when i use the link i can access the image. because i have logged in from my device.
note: i am using firebase for all of these
Try
<v-img :src="require('getPhoto()')" height="200px" width="200px"></v-img>
instead of
<v-img :src="getPhoto()" height="200px" width="200px"></v-img>
Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.
// Incorrect
<v-img src="../path/to/img" />
// Correct
<v-img :src="require('../path/to/img')" />
Source: Vuetify
Update: When not using a relative path, I tried creating an example when using a function to get the URL for the image source. I think there are two problems with your code:
Remove the () from getPhoto() in <v-img>
Add the getPhoto() to the computed property.
Here is a Codepen
I hope it helps.
I'm using the upload component of Element UI. It unfortunately triggers a POST request as soon as a file is uploaded. What I'm aiming for is to push the files to an empty array which would be posted after with button.
HTML
// Element UI documentation says http-request overrides xhr behavior
// so I can use my own file request. In this case, I wanted to use a method
// though I'm not quite sure about this part?
<el-upload
action="",
:http-request="addAttachment",
:on-remove="deleteAttachment",
:file-list="attachments">
<el-button size="mini" type="primary">Add file</el-button>
</el-upload>
// button that uploads the files here
JS
data() {
attachments: []
},
methods: {
addAttachment ( file, fileList ) {
this.attachments.push( file );
},
deleteAttachment () {
// removes from array
}
}
Apparently, you also need to set the auto-upload prop to be false. Otherwise, it defaults to true and will automatically try to upload the file even if you've specified a function for the http-request prop.
In your case:
<el-upload
action="",
:http-request="addAttachment",
:auto-upload="false"
:on-remove="deleteAttachment",
:file-list="attachments"
>
<el-button size="mini" type="primary">Add file</el-button>
</el-upload>
Here's the documentation for the component.