I am new in vue js , I am passing data from parent component to child one using props and I can use it in child normally but I can't use it in data of child component
parent
<template>
<div>
<show-question :qdata="question" v-if="question"></show-question>
<h1 v-if="!question"> some error </h1>
</div>
</template>
<script>
import ShowQuestion from './ShowQuestion';
export default {
created(){
axios.get(`/api/question/${this.$route.params.slug}`)
.then(res => {
this.question = res.data.data
})
},
data(){
return {
question : {},
}
},
components:{
ShowQuestion,
},
}
</script>
child
<template>
<v-container>
<v-card>
<div>
<v-card-title class="blue--text"
>{{ data.title }}
<v-spacer></v-spacer>
<v-btn color="teal white--text">5 Replies</v-btn>
</v-card-title>
<v-card-subtitle
> {{data.uid}} {{ data.user }} said {{ data.created_at }}</v-card-subtitle
>
</div>
<v-card-text>{{ data.body }}</v-card-text>
<v-card-actions v-if="own">
<v-btn icon text>
<v-icon color="orange">create</v-icon>
</v-btn>
<v-btn icon text>
<v-icon color="red">delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
<script>
export default {
props: ['qdata'],
data(){
return {
own: User.own(this.qdata.uid),
};
},
};
</script>
this.qdata.uid is always be undefined in console, although it supposed it have values and I can saw it from child template
enter image description here
Your show-questioncomponent is mounted early on because v-if="question" is true. When show-question is mounted, your api call hasn't had a chance to finish, so question is the same as the initial value {}, which is why uid is undefined.
I would change question : {} to question: null, then the child component will only be mounted when there's a question (after the api call).
This is simply because if you check the truthy of an object it will always return true even if the object is empty, which results in the component being rendered before the API call has finished.
Instead, you can check if it's empty or not by converting it to an array and check it's length value, i.e. Object.entries(question).length or simply use the lodash helper method: _isEmpty(question).
Also a quick side note: it's cleaner to use v-else after v-if when you want to render something or the other instead of explicitly negating the value in another v-if, though they're required to be direct siblings.
Related
I am trying to create a custom component that wraps a Vuetify v-dialog.
I am having trouble with closing the dialog using a button inside the dialog.
I've tried many things, like #emit('input', false), this.value = false or using a local data value instead of value, but nothing seems to work.
My dialog looks like this (simplified):
// file: DeleteDialog.vue
<template>
<v-dialog :value="value" #input="$emit('input', $event)" width="550">
<template v-slot:activator="{ on, attrs }">
<slot
name="activator"
v-bind:on="on"
v-bind:attrs="attrs"></slot>
</template>
<v-btn #click="closeDialog">
Close
</v-btn>
</v-dialog>
</template>
<script>
export default {
props: {
value: Boolean,
},
methods: {
closeDialog() {
this.$emit('input', false);
},
},
};
</script>
When using the dialog like this, how do I get the Close-button to work?
<DeleteDialog>
<template v-slot:activator="{on, attrs">
<v-btn v-on="on" v-bind="attrs">
Show dialog
</v-btn>
</template>
Are you sure you want to delete this user?
</DeleteDialog>
The prop you pass value is responsible for showing or hiding your v-dialog inside DeleteDialog.vue.
So when clicking the button close, we will emit an event close that will maake the parent of DeleteDialog change the prop value it passed to it as false.
// in your parent component
<DeleteDialog :value="show_dialog" #close="show_dialog = false>
in your deleteDialog
//in delete dialog
<template>
<v-dialog :value="value" width="550">
<v-btn #click="closeDialog">
Close
</v-btn>
</v-dialog>
</template>
<script>
export default {
props: {
value: Boolean,
},
methods: {
closeDialog() {
this.$emit('close');
},
},
};
</script>
I think that is more suitable way of achieving what you want
I have a btnSmall component with this props and click
<v-btn
class="white--text btn_main_product"
color="red darken-1"
#click="click"
>
<slot/>
</v-btn>
props: {
click: Function
}
I use this component like this in another component.
<template>
<v-card
class="pa-4"
>
<v-text-field
v-model="lname"
></v-text-field>
<v-btn :click="clickAccept(lname)">accept/v-btn>
</v-card>
</template>
<script>
import BtnSmall from "../buttons/btnSmall";
export default {
name: "editName",
components: {BtnSmall},
data() {
return {
lname: ''
}
},
props: ['clickAccept']
}
</script>
and use this component in the page.
after use <edit-name :click-accept="nameClickAccept"/> whit this method.
nameClickAccept(fname, lname) {
console.log(lname)
}
my method run with change text-field i cant use click.
i need run method with click on the btn.
The vue-approach would be to emit an event in the btnSmall component and react on that event in the parent component.. This: https://v3.vuejs.org/guide/component-custom-events.html#event-names shows you how you can do it.
I can access method from parent vue component using ref and now I would like to access valid data from parent vue component using ref too
Parent.vue:
<v-btn #click="savenewcase()" dark text :disabled="!valid">Save</v-btn></v-toolbar-items>
<NewCaseDialog ref="NewCase"></NewCaseDialog>
<script>
methods: {
savenewcase() {
this.$refs.NewCase.save()
}
}
</script>
NewCaseDialog.vue
<template>
<v-card>
<v-form v-model="valid" ref="NewCaseForm" #keyup.native.enter="save()">
<v-container>
<v-text-field
:counter="64"
v-model="vsubject"
label="Subject / Judul"
prepend-icon="subject"
></v-text-field>
</v-container>
</v-form>
<v-btn #click="save()" :disabled="!valid" color="primary">Save</v-btn>
</v-card>
</template>
<script>
data: () => ({
valid: false,
}),
methods:{
save() {
//run save
}
}
</script>
Edit :
I'm using vuetify
You can try Props instead, it's much easier. From docs:
child-component.vue
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
parent.vue
<blog-post post-title="hello!"></blog-post>
This question already has answers here:
Vuex - Computed property "name" was assigned to but it has no setter
(5 answers)
Closed 4 years ago.
I am reproducing this code (Codepen):
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-dialog
v-model="dialog"
width="500"
>
<v-btn
slot="activator"
color="red lighten-2"
dark
>
Click Me
</v-btn>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Hello there Fisplay
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
The only difference between my real code and this one, is that I defined dialog in store/index.js (this in Nuxt.js) where I declared dialog an element of the state:
return new Vuex.Store({
state: {
dialog: false,
And then, in my current component I import that $store.state.dialog flag:
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'dialog'
]),
}
</script>
Whenever I click on the button, I get this error message:
[Vue warn]: Computed property "dialog" was assigned to but it has no
setter.
How to fix this? Any alternative?
You need to use the Vuex mutation to update the state.
https://vuex.vuejs.org/guide/mutations.html
In your example,
Your click event should be handled in the methods #click="handleClick"
methods: {
handleClick() {
this.$store.commit('openDialog')
}
In your store.js
mutations: {
openDialog(state) {
state.dialog = true
}
}
mapState will only create getters. You should define a mutation in your vuex store, which will be able to change the state.
Just add this to your store:
...
mutations: {
SET_DIALOG_FLAG_FALSE (state) {
state.dialog = false;
},
//optional if you do not want to call the mutation directly
//must important different is, that a mutation have to be synchronous while
//a action can be asynchronous
actions: {
setDialogFalse (context) {
context.commit('SET_DIALOG_FLAG_FALSE');
}
}
If you want to work with mapMutations/mapAction in your component:
import { mapMutation, mapActions } from vuex;
...
//they are methods and not computed properties
methods: {
...mapMutations([
'SET_DIALOG_FLAG_FALSE'
]),
...mapActions([
'setDialogFalse'
])
}
Now in your v-btn you can call the action or mutation.
<v-btn
color="primary"
flat
#click="this.setDialogFalse"> I accept </v-btn>
I'm trying to change the v-model of a component by the parent component most I'm not getting.
In the parent component I have a showProgress variable, I want it when I change it to true the child v-model <progress-modal> switch to true.
ProgressModal.vue
<template>
<v-dialog v-model="show" persistent max-width="400">
<v-card :dark="($theme === 'dark')">
<v-card-title class="headline" v-text="title"></v-card-title>
<v-divider></v-divider>
<div class="text-xs-center mt-2">
<v-progress-circular indeterminate :size="100" :color="$color"></v-progress-circular>
<v-card-text v-text="text"></v-card-text>
</div>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text'],
data: () => ({
show: true
}),
methods: {
}
}
</script>
I already tried to use
<progress-modal v-model="showProgress">
Instead of v-model in v-dialog but it does not work :(
Pass value prop as value to v-dialog component, and re-emit input from v-dialog component:
//CustomDialog.vue
<v-dialog :value="value" #input="$emit('input', $event)">
</v-dialog>
...
props:['value']
and add v-model to your parent (custom dialog)
//Parent.vue
<custom-dialog v-model="showProgress">
Example
To enable usage of v-model by the parent, you have to define a value prop in the child and use it.
<template>
<v-dialog v-model="value" persistent max-width="400">
...
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text', 'value'], // added 'value'
data: () => ({
...
</script>
This way, when you use:
<progress-modal v-model="showProgress">
...the value inside progress-modal will have the value of parent's showProgress.
Keeping it named show
To use other internal name instead of value you can declare the model option in the component.
<template>
<v-dialog v-model="show" persistent max-width="400">
...
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text', 'show'], // added 'show'
model: { // added model option
prop: 'show' //
}, //
data: () => ({
}), // in this case, remove show from data
...
</script>