在视图中访问子组件数据

Question

Currently I'm using Laravel 5.2 with Elixir 5 and Vue 2.0.

I'm stuck on how to access and imported component's data from the element view using something like v-if.

Here's my setup:

resources\views\vuetest.blade.php

<div id="app">
    <modal v-if="showModal"></modal>

    <button>Show Modal</button>
</div>

resources\assets\vuejs\app.js

import Vue from 'vue';
import Modal from './components/modals/show-modal.vue';
Vue.component('modal', Modal);

if (document.getElementById("app")){
    var app = new Vue({
        el: '#app',

        data: {

        },

        methods: {

        },

        computed: {

        },

        components: {
            'modal': Modal
        }

    });

    window.vue = app;
}

resources\assets\vuejs\components\modals\show-modal.vue

<template>
    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showModal: false
            }
        },

        components: {

        },
    }
</script>

Now if I just use this without v-if then it works and pulls in the template correctly.

However if I use what I had in my example it gives me an error:

app.js:967 [Vue warn]: Property or method "showModal" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)

If I add data in main app.js it can access it but not in imported child components. I'd rather not make the main app.js messy and better to use imports and keep components in organized subfolders. How can I access these child component data properly?

Answer 1

If you want to change the state of the child component, you can set a ref on the component and access the properties directly.

In this example, a ref is set on each modal component.

<bootstrap-modal ref="modal1">

Then, to change a data value in the referenced component, simply set it like you would any other javascript value.

 <button type="button" class="btn btn-primary" @click="$refs.modal1.visible = true">Show Modal One</button>

console.clear()

const BootstrapModal = {
  template: "#modal-template",
  data() {
    return {
      visible: false
    }
  },
  watch: {
    visible(show) {
      if (show) $(this.$el).modal('show')
      else $(this.$el).modal('hide')
    }
  },
  mounted() {
    // listen for the close event
    $(this.$el).on("hidden.bs.modal", () => {
      this.visible = false
    })
  }
}

new Vue({
  el: "#app",
  components: {
    BootstrapModal
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="app">
  <button type="button" class="btn btn-primary" @click="$refs.modal1.visible = true">Show Modal One</button>
  <bootstrap-modal ref="modal1">
    <span slot="title">Modal One</span>
    <p slot="body">Modal One Content</p>
  </bootstrap-modal>
  <button type="button" class="btn btn-success" @click="$refs.modal2.visible = true">Show Modal Two</button>
  <bootstrap-modal ref="modal2">
    <span slot="title">Modal Two</span>
    <p slot="body">Modal Two Content</p>
  </bootstrap-modal>
</div>

<template id="modal-template">
  <div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><slot name="title">Modal Title</slot></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <slot name="body"><p>Modal Body</p></slot>
      </div>
      <div class="modal-footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</div>
</template>

</div>