CODEWITHSUNDEEP
vue.jsvue-componentbootstrap-vue
Vad1mo
Vad1mo

Reputation: 5543

How to access parents data value in vuejs with the template syntax

In my VueJS app I am using bootstrap-vue and want to use iframe inside a collapsable elements b-collapse. Because of some problems with iframe content and resizing (problem not related here) I found out that if I enable/disable b-embed with conditional rendering it works.

The parent component b-collapse has a data element called show which change its state if toggle is clicked. In my HelloWorld component I want that b-collapse can pass it's show value into the if check of b-embed.

My approach with this.$parent.$data.show isn't working and I am not sure if there is any better way to do so.

<template>
<div>
  <b-btn v-b-toggle.logs>
    <span class="when-opened">Close</span>
    <span class="when-closed">Open</span>
    Trace
  </b-btn>
  <b-collapse id="logs">
    <b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
    <div>Data: {{this.$parent.$data.show}}</div>
  </b-collapse>
</div>
</template>


<script lang="ts">
import Vue from "vue";
import { Prop, Component, Inject } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  src = "http://localhost:7681/";
}
</script>

Upvotes: 2

Views: 4692

Answers (1)

Cyrbuzz
Cyrbuzz

Reputation: 119

Like this:

parent.vue

<template>
    <Child :show="myShow"></Child>
</template>
<script>
    import Child from './child'
    export default {
        data () {
              return {
                   myShow: 'StackOverflow'
              }
        },
        components: {Child}
    }
</script>

child.vue

<div>
  <b-btn v-b-toggle.logs>
    <span class="when-opened">Close</span>
    <span class="when-closed">Open</span>
    Trace
  </b-btn>
  <b-collapse id="logs">
    <b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
    <div>Data: {{this.$parent.$data.show}}</div>
  </b-collapse>
</div>
<script>
     export default {
          props: {
               show: {
                   type: Number,
                   require: true 
               }
          }
     }
</script>

Or use vuex to do this.

Upvotes: 1

Related Questions