vue access valid data from parent component

Question

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

Which data are you referring to here? Please post all the relevant code when asking a question. — palaѕн, Apr 11 '20 at 05:11
In `Parent.vue` there is no data declared as `valid` but used in the template?? — palaѕн, Apr 11 '20 at 07:33
@palaѕн yes, what I want is moving save button in the NewCaseDialog.vue to Parent.vue. the method "save" is working with $ref but validation is not working because it can't read "valid" data var in the NewCaaeDialog.vue — Ahmad Nazirul, Apr 11 '20 at 07:38
ok, so what you want is on parent save button click validate child and then return the updated value of `valid` back to parent and then disable or enable parent `save` button? — palaѕн, Apr 11 '20 at 07:45
You can try this: [VueJS access child component's data from parent](https://stackoverflow.com/questions/40410332/vuejs-access-child-components-data-from-parent) — palaѕн, Apr 11 '20 at 07:52
So, I think you can access child `valid` data in parent like `this.$refs.NewCase.valid` — palaѕн, Apr 11 '20 at 07:56
unfortunately is not working TypeError: Cannot read property 'valid' of undefined — Ahmad Nazirul, Apr 11 '20 at 08:30

score 0 · Answer 1 · edited Jul 16 '22 at 04:15

0

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>

edited Jul 16 '22 at 04:15

tony19

125,647
18
229
307

answered Mar 27 '21 at 11:52

Accodius

13
1
3

vue access valid data from parent component

1 Answers1