[Vuejs]-How to access property with v-if when template is moved to a custom component

by

2👍

✅

Pass the prop down to the component. Steps:

  • Add props: ['seen'], in the component
  • Add the binding in the parent: :seen="seen"

Demo:

Vue.component('test', {
  props: ['seen'],
  template: `
    <div id="tCreateTest">
        <div id="createTestContainer" @click="seen = !seen">
            <h2>Create</h2>
            <h1 id="testH1">Test</h1>
            <div class="text-left">
                <div class="col-sm-10 form-group-lg">
                    <div v-if="seen" id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="titleInput">Enter title:</label>
                            <input type="text" class="form-control form-control" id="titleInput"
                                   placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                            Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
});

new Vue({
  el: '#testContainer',
  data: {
    seen: true
  }
});
<script src="https://unpkg.com/vue"></script>
<div id="testContainer">
  <div id="teacherMain">
    <h2>Welcome to the</h2>
    <h1> PRO Test Application</h1>
  </div>
  <test :seen="seen"></test>
  
  <br>
  <button @click="seen = !seen">Toggle seen in parent</button>
</div>
👤acdcjunior

Leave a comment