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">
Related
I am trying to use a custom Vue input component with a v-model, but the value is not updating in the parent component. I am using Vue 3 with Nuxt.js.
Here is my custom input component:
<template>
<input
type="text"
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
:placeholder="placeholder"
class="border border-gray-300 rounded-lg w-full p-2 text-black m-1"
/>
</template>
<script setup>
const props = defineProps({
modelValue: String,
placeholder: String,
});
const emit = defineEmits(["update:modelValue"]);
</script>
<script>
export default {
name: "MyInput",
};
</script>
And here is how I am using it in the parent component:
<template>
<div>
<MyInput v-model="inputValue" placeholder="Enter a value" />
</div>
</template>
<script>
import MyInput from "./MyInput.vue";
export default {
name: "MyParentComponent",
components: {
MyInput,
},
data() {
return {
inputValue: "",
};
},
};
</script>
The inputValue data property is not being updated when I type in the input field. Can someone help me figure out what I'm doing wrong?
I have a Vue 3 project without Nuxt.js using this exact same code and it works there.
there is no mistake in your codes I used exact same code and it's working with no problem
but:
there is no need to import components (Nuxt supports auto import)
your file's structure should be like this:
|__components
|
|__MyInput.vue
|
|__MyParentComponent.vue
|__app.vue
MyInput.vue
<template>
<input
type="text"
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
:placeholder="placeholder"
class="border border-gray-300 rounded-lg w-full p-2 text-black m-1"
/>
</template>
<script setup>
const props = defineProps({
modelValue: String,
placeholder: String,
});
const emit = defineEmits(["update:modelValue"]);
</script>
the dev tools will show the name of the component. So no additional naming is necessary.
MyComponent.vue
<template>
<div>
<MyInput v-model="inputValue" placeholder="Enter a value" />
<p>{{ inputValue }}</p>
</div>
</template>
<script setup>
let inputValue = ref("");
</script>
app.vue
<template>
<MyComponent />
</template>
I am using vue components in a Laravel project.
I have taken sample code from https://vuejs.org/guide/components/events.html#usage-with-v-model
I have a child component with an input box:
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
/>
</template>
This component is being used in a parent component.
<phone-input v-model="phone"/> {{phone}}
The parent component displays the input box with the initial value of the phone variable. However, the changed value is not reflected in the parent's phone variable ( {{phone}} does not update). Am I missing something? I have cleared the cache, but it did not help.
I tried another variation of the code (from vue.js documentation code) as given here. However, this also does not work.
Parent
<MyComponent v-model:title="bookTitle" />. {{bookTitle}}
<!-- Child Component MyComponent.vue -->
<script>
export default {
props: ['title'],
emits: ['update:title']
}
</script>
<template>
<input
type="text"
:value="title"
#input="$emit('update:title', $event.target.value)"
/>
</template>
Thanks for your help.
Take a look at following snippet, looks ok:
const app = Vue.createApp({
data() {
return {
phone: "0123456"
}
},
})
app.component('phoneInput', {
template: `
<input
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
/>
`,
props: ['modelValue'],
emits: ['update:modelValue'],
})
app.mount("#demo")
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<phone-input v-model="phone"></phone-input>
{{ phone }}
</div>
<script>
export default {
props: ['modelValue'],
}
</script>
<template>
<input
:value="modelValue"
#input="$emit('input', $event.target.value)"
/>
</template>
You need specially emit input to make it work
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 using the Trix editor and trying to render some stored content inside the box, but nothing is showing.
My Trix editor component wrapper:
<template>
<div>
<input type="hidden" :id="id" :name="name" :value="storedContent ? storedContent : 'blank'" />
<trix-editor :input="id"></trix-editor>
</div>
</template>
<script>
import Trix from "trix";
export default {
props: ["id", "name", "storedContent"]
};
</script>
The editor on the page doesn't render anything, regardless if I provide the stored-content prop.
It just shows an empty editor.
However, on inspection the hidden input does show the stored-content (or 'blank') on the page.
<input id="job-full-desc" type="hidden" name="full_description" value="blank">
The 'blank' value gets overwritten as soon as I write anything in the box.
Any thoughts?
I tried the following , when the component created I manually add the value to trix innerHTML
hoppefully can assist you thaks
<template>
<div>
<input :id="id" type="hidden" :name="name" :value="value">
<trix-editor ref="trix" :input="id" :placeholder="placeholder" style="min-height:300px"></trix-editor>
</div>
</template>
<script>
import Trix from 'trix';
import 'trix/dist/trix.css';
export default {
props: ['name', 'value', 'placeholder', 'shouldClear' , 'id'],
mounted () {
this.$refs.trix.innerHTML = this.value;
console.log(this.$refs.trix.innerHTML);
}
};
</script>
I am trying to follow this tutorial. I am getting a Modal using below code.
<modal
v-model="showModal"
:animation-duration="animationDuration"
:close-on-click-away="closeOnClickAway"
>
<p slot="header">Confirmation needed</p>
<p slot="content">Do you want to continue?</p>
<template slot="actions">
<div class="ui black deny button"
#click="showModal=false">
No
</div>
<div class="ui positive right labeled icon button"
#click="confirm">
Yes
<i class="checkmark icon"></i>
</div>
</template>
</modal>
Here I would like to place below portion of the code in another .vue file named ModalBody.vue.
<p slot="header">Confirmation needed</p>
<p slot="content">Do you want to continue?</p>
<template slot="actions">
<div class="ui black deny button"
#click="showModal=false">
No
</div>
<div class="ui positive right labeled icon button"
#click="confirm">
Yes
<i class="checkmark icon"></i>
</div>
</template>
Then I am trying to access that file like below
<modal
v-model="showModal"
:animation-duration="animationDuration"
:close-on-click-away="closeOnClickAway"
>
<modal-body></modal-body>
</modal>
But it is not working. Even I am not getting any error in console.
UPDATE
Parent.vue
<template>
<modal
v-model="showModal"
:animation-duration="animationDuration"
:close-on-click-away="closeOnClickAway"
>
<modal-body></modal-body>
</modal>
</div>
</template>
<script>
import ModalBody from './ModalBody';
export default {
components: { ModalBody },
}
</script>
use import
<template>
<!-- html code -->
<modal-body v-show="showModal"></modal-body>
</template>
<script>
import modalBody from './ModalBody'
export default {
components: {
childComponent
},
data: () => ({ showModal: false })
}
</script>
UPDATE:
I committed mistakes, but your noticed her.
your updated code have mistakes too
tag </div>
<modal> - is a component
so
Parent.vue
<template>
<modal
v-model="showModal"
:animation-duration="animationDuration"
:close-on-click-away="closeOnClickAway"
>
<modal-body></modal-body>
</modal>
</template>
<script>
import ModalBody from './ModalBody';
import modal from './modal';
export default {
components: {
ModalBody,
modal
}
/* component code */
}
</script>
important!
If you want to insert another component or element into the component, then inside this component there must be a <slot></slot>. see
also see my example app: https://codesandbox.io/s/3xyx386q65
open 'components/setProps/setProps.vue'