I'm a ionic and vue beginner creating my first app.
I'm using the router-link thats works perfectly fine to all my routes but one, and i get this error message : 'Uncaught SyntaxError: Identifier '__scdnguid' has already been declared'
this identifier apparently comes from the cache since i havent named nothing like that!
the route that fire this error message is the
'
Here's the home component :
<template>
<ion-page>
<ion-content>
<base-layout>
<ion-item color="primary" class="ion-margin">
<ion-avatar slot="start">
<img
class="avatar"
alt="Silhouette of a person's head"
src="https://ionicframework.com/docs/img/demos/avatar.svg"
/>
</ion-avatar>
<ion-label>
<ion-text> Hello Luigi </ion-text>
</ion-label>
</ion-item>
<ion-grid>
<ion-row>
<!-- HOME HEADER -->
<div class="header-container ion-margin-bottom ion-margin-top">
<HomeHeader />
</div>
<!-- HomeOverview -->
<HomeOverview />
<!-- HomeCards -->
<div class="row-container">
<HomeCard :data="homeCards" router-link="/cards" />
<HomeCard :data="homeBudget" />
</div>
<div class="row-container">
<HomeCard :data="homeLoan" router-link="/loans" />
<HomeCard :data="homeDocuments" />
</div>
<!-- SIBLINGS -->
<HomeSiblings />
<!-- WALLETS -->
<HomeWallet router-link="/wallet" />
<ion-grid>
<ion-row
class="ion-justify-content-center ion-margin-bottom ion-padding-bottom"
>
<ion-col>
<div
color="medium"
class="ion-margin-bottom ion-padding-bottom"
>
<div class="ion-text-center" color="light-tint">
<h6>2022 © Bank One Inc.</h6>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-row>
</ion-grid>
</base-layout>
</ion-content>
</ion-page>
</template>
<script>
import {
IonPage,
IonAvatar,
IonItem,
IonLabel,
IonText,
IonGrid,
IonRow,
IonCol,
IonContent,
} from "#ionic/vue";
import HomeHeader from "#/components/home/HomeHeader";
import HomeOverview from "#/components/home/HomeOverview";
import HomeCard from "#/components/home/HomeCard";
import HomeSiblings from "#/components/home/HomeSiblings";
import HomeWallet from "#/components/home/HomeWallet";
import homeCards from "../utils/home/homeCards";
import homeBudget from "../utils/home/homeBudget";
import homeLoan from "../utils/home/homeLoan";
import homeDocuments from "../utils/home/homeDocuments";
import { ellipsisHorizontalOutline, document } from "ionicons/icons";
export default {
name: "HomePage",
components: {
HomeHeader,
HomeOverview,
HomeCard,
HomeSiblings,
HomeWallet,
IonPage,
IonContent,
IonAvatar,
IonItem,
IonLabel,
IonText,
IonGrid,
IonRow,
IonCol,
},
setup() {
return {
ellipsisHorizontalOutline,
document,
homeCards,
homeBudget,
homeLoan,
homeDocuments,
};
},
};
</script>
And here is the HomeCard Component :
<template>
<ion-card color="secondary" class="card-container">
<ion-row class="ion-justify-content-between">
<ion-card-title class="ion-padding-start">
<h6>{{ data.title }}</h6>
</ion-card-title>
<ion-icon
class="ellipse-padding"
size="small"
color="light"
:icon="ellipsisHorizontalOutline"
></ion-icon>
</ion-row>
<ion-row>
<div class="bank-card-container ion-margin">
<div class="card-bank-1"></div>
<div class="card-bank-2"></div>
</div>
</ion-row>
</ion-card>
</template>
<script>
import { IonRow, IonCard, IonCardTitle, IonIcon } from "#ionic/vue";
import { ellipsisHorizontalOutline } from "ionicons/icons";
export default {
name: "HomeCard",
components: {
IonRow,
IonCard,
IonCardTitle,
IonIcon,
},
props: ["data"],
setup() {
return {
ellipsisHorizontalOutline,
};
},
};
</script>
Related
I want to have many card from my component and I want to change the src attribute on every image. Please help me to do it. Thankyou :D
<!---THIS IS MY PAGE FILE---->
<template>
<div>
<class-list :src="image1"></class-list>
<class-list :src="image2"></class-list>
<class-list :src="image3"></class-list>
<class-list :src="image4"></class-list>
</div>
</template>
<!---THIS IS MY COMPONENT FILE---->
<template>
<div>
<a-card hoverable style="width: 240px">
<img
slot="cover"
alt="example"
:src="image"
/>
<a-card-meta title="Europe Street beat">
<template slot="description">
www.instagram.com
</template>
</a-card-meta>
</a-card>
</div>
</template>
This kind of code should solve your use-case, here is a SFC link.
page
<template>
<div v-for="image in images">
<card :image="image"></card>
</div>
</template>
<script>
import Card from './Card.vue'
export default {
components: { Card },
data() {
return {
images: ['https://images.pexels.com/photos/5044497/pexels-photo-5044497.jpeg', 'https://images.pexels.com/photos/9365604/pexels-photo-9365604.jpeg', 'https://images.pexels.com/photos/10392192/pexels-photo-10392192.jpeg']
}
}
}
</script>
Card.vue
<template>
<div>
<img slot="cover" alt="example" :src="image" />
</div>
</template>
<script>
export default {
props: ['image']
}
</script>
<style scoped>
img {
width: 200px;
}
</style>
Here is the end result
How can I implement displaying a link in a primevue toast message? I cannot use v-html directive and triple brackets do not work. Does anybody has another idea how to solve it?
A hacky way is to extends Toast component:
Here a codesandbox : https://codesandbox.io/s/extend-primevue-toast-o5o1c?file=/src/CustomToastMessage.vue
1. On your component
Import your custom toast component where you need to call this.$toast:
<template>
<div>
<CustomToast />
<CustomToast position="top-left" group="tl" />
<CustomToast position="bottom-left" group="bl" />
<CustomToast position="bottom-right" group="br" />
<div class="card">
<Button #click="test" label="test" />
</div>
</div>
</template>
<script>
import CustomToast from "./CustomToast.vue";
export default {
components: {
CustomToast,
},
data() {
return {
messages: [],
};
},
methods: {
test() {
this.$toast.add({
severity: "success",
summary: "Test",
detail: "<b>Test Bold</b>",
});
},
},
};
</script>
2. CustomToast.vue (extend primevue toast)
<template>
<Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" #enter="onEnter">
<CustomToastMessage
v-for="msg of messages"
:key="msg.id"
:message="msg"
#close="remove($event)"
/>
</transition-group>
</div>
</Teleport>
</template>
<script>
import Toast from "primevue/toast/Toast.vue";
import CustomToastMessage from "./CustomToastMessage.vue";
export default {
extends: Toast,
components: {
CustomToastMessage,
},
};
</script>
3. CustomToastMessage (extend primevue toastmessage)
Add v-html where you want to have html
<template>
<div
:class="containerClass"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="p-toast-message-content">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{ message.summary }}</span>
<div class="p-toast-detail" v-html="message.detail"></div>
</div>
<button
class="p-toast-icon-close p-link"
#click="onCloseClick"
v-if="message.closable !== false"
type="button"
v-ripple
>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
</div>
</div>
</template>
<script>
import ToastMessage from "primevue/toast/ToastMessage.vue";
export default {
extends: ToastMessage,
};
</script>
There is an easiest solution.
Just implement your own template.
Example:
<Toast :position="toastPosition">
<template #message="slotProps">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{slotProps.message.summary}}</span>
<div class="p-toast-detail" v-html="slotProps.message.detail" />
</div>
</template>
</Toast>
I am write input element with icon to show/hide password, how can I write event emit in v-icon to tell parent component that icon is click
Here is my child component BaseInputPassword
<div class="label">
{{ labelName }} <span v-if="required" class="required">※</span>
</div>
<div class="input_password">
<input
:type="type ? 'password' : 'text'"
:placeholder="placeholder"
/>
<v-icon #click="type =! type">{{ type ? "mdi-eye-off" : "mdi-eye" }}</v-icon>
</div>
</div>
</template>
<script>
export default {
props: ["labelName", "placeholder", "required", "type" ],
data() {
return {
};
},
methods: {
updateValue($event) {
this.$emit("input", $event);
},
}
}
</script>
Here is my parent component, im using three child component
<div class="input_area">
<BlockInputPassword labelName="現在のパスワード" required="true" :type="show1" v-model="password" ></BlockInputPassword>
<BlockInputPassword labelName="現在のパスワード" required="true" :type="show2" v-model="password" ></BlockInputPassword>
<BlockInputPassword labelName="新しいパスワードの確認" required="true" :type="show3" v-model="password"></BlockInputPassword>
</div>
</div>
<div class="footer">
<router-link to=""
><div class="btn_login btn_simple">
キャンセル
</div></router-link>
<router-link to=""
><div class="btn_login btn_simple status_color_4">
変更
</div></router-link>
</div>
</div>
</div>
</template>
<script>
import BlockInputPassword from "../components/common/BlockInputPassword"
export default {
components: {
BlockInputPassword,
},
name: "PasswordChange",
data() {
return {
password: '',
show1: false,
show2: false,
show3: false,
};
},
have you child component v-icon emit a custom event
<v-icon #click="$emit('icon-clicked')">
then from the parent component
<div class="input_area">
<BlockInputPassword #icon-click="doSomething" ...></BlockInputPassword>
...
</div>
Im trying to popup a login dialog but the problem i cannot make appear even I set it 'true'. below is my two components that appear on main layout.
login components:
<template>
<div v-show="true">
<q-dialog>
<q-card>
<q-card-section>
<q-form class="q-gutter-md" style="width: 400px">
<h4 class="text-h4 text-primary q-my-auto text-weight-medium">Login</h4>
<q-input
filled
:error="state.error"
label="Your email *"
lazy-rules
:rules="[ required, email ]"
/>
<q-input
filled
v-model="state.doc.password"
:error-message="state.error ? 'Incorrect email or password' : 'Field is Required'"
:error="state.error"
:type="state.showPassword ? 'text' : 'password'"
label="Password *"
lazy-rules
:rules="[ required ]">
</q-input>
</div>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script>
//import part here...
export default defineComponent({
setup () {
//other function here...
})
</script>
other components that call login component as dialog:
<template>
<LoginComponents />
</template>
<script>
import { defineComponent } from 'vue'
import LoginComponents from 'components/LoginComponents'
export default defineComponent({
components: {
LoginComponents
}
})
</script>
q-dialog needs to know it should be shown.
There are examples of how to use that component here.
https://quasar.dev/vue-components/dialog
<q-dialog v-model="isShownWhenThisIsTrue">
i using vee-validate version 3.0.11 for validate my form like below
<validation-observer v-slot="{ invalid }" slim>
<validation-provider rules="required" v-slot="{ errors, dirty, invalid}" slim>
<div class="form-group">
<label class="sr-only" for="txtUsername"></label>
<input
autocomplete="off"
id="txtUsername"
name="username"
type="text"
class="form-control txtUsername"
placeholder="Email or Username"
v-model="username"
v-bind:class="{ 'is-invalid': invalid && dirty,'is-valid': !invalid }" />
</div>
</validation-provider>
<validation-provider rules="required" v-slot="{ errors, dirty, invalid}" slim>
<div class="form-group">
<label class="sr-only" for="txtPassword"></label>
<input
id="txtPassword"
name="password"
type="password"
class="form-control"
placeholder="Password"
v-model="password"
v-bind:class="{ 'is-invalid': invalid && dirty,'is-valid': !invalid }" />
</div>
</validation-provider>
<div >
<button
type="button"
name="login"
class="btn btn-primary"
v-on:click="doLogin()"
:disabled="invalid">
Login
</button>
</div>
</validation-observer>
and i wrote some test with chai and mocha
in my test i need to find the button
but when i using find method for find button all html tag between validation-observer tag is not loaded in my wrapper.
my test code is:
// i change it to shallowMount to mount but problem is exist,
// mount does not render any thing between validation-observer tag
const wrapper = mount(LoginView, { sync: false });
describe('Login.vue', () => {
it('some text, () => {
console.log(wrapper.html());
// my log include all of tag except tags between the validation-observer tag
});
});
can some one tell me how i can find my button by using warraper.find(), please?
You are trying to shallow mount a component that needs to be mounted in order to render its children. If you want to ignore ValidationProvider all together you can provide a fake one as shown below.
ContactForm.vue
<template>
<div>
<ValidationProvider rules="required" name="input" v-slot="{ errors }">
<p :style="{color: 'red'}">To be, or not to be</p>
<input type="text" v-model="value">
<span id="error">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
name: "ContactForm",
components: {
ValidationProvider
},
data: () => ({
value: ""
})
};
</script>
ContactForm.test.js
import { shallowMount, createLocalVue } from "#vue/test-utils";
import ContactForm from "./ContactForm";
import FakeValidationProvider from "./FakeValidationProvider";
test("Test shallow mount renders what's inside validation provider", async () => {
const localVue = createLocalVue();
var wrapper = shallowMount(ContactForm, {
stubs: {
ValidationProvider: FakeValidationProvider
},
localVue
});
expect(wrapper.text()).toContain("To be, or not to be");
});
FakeValidationProvider.vue
<template>
<div v-bind="{ ...$props, ...$attrs }">
<slot :errors="errors"></slot>
</div>
</template>
<script>
export default {
name: "FakeValidationProvider",
data() {
return {
errors: []
};
}
};
</script>
Feel free to extend the slot with any other parameters you need besides errors. If you want to make those parameters dynamic as well, check out this article on rendering slots