Laravel: Append using vue js

Question

Im new in vue js and trying to explore it. I have button and that button has an event click, once the button clicked, it will add an input field in my specific div.

Vue file

<div class="item form-group">
    <div class="col-md-6 col-sm-6 ">
        <button type="button" class="btn btn-secondary" @click="addSchedule"><i class="fa fa-plus"></i>Add Schedule</button>

    </div>
</div>
<div class="item form-group added-schedule">
<div class="col-md-4 col-sm-4 ">
    <button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add qqqqqqq</button>
   s
</div>
<div class="col-md-4 col-sm-4 ">
    <button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add asdasd</button>
</div>
<div class="col-md-4 col-sm-4 ">
    <button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add wwwwwww</button>
</div>

 addSchedule(e){
                e.preventDefault();
                return false;
    },

Scenario

User clicked the Add schdule,imagine the 3 buttons is my input fields

NOTE: The user can Add Schedule as many as the user like.

Question: How do I append the input fields in my class added-schedule once the button clicked?

try to use v-if. if someone clicks the button, then only the input field shows up. input field is always there but not show up until the user clicks the button. — Ruhith Udakara, Apr 23 '20 at 02:55
I updated my post, the user can add as many as schedule he wants. — Angel, Apr 23 '20 at 02:57
have a look at my fiddle https://jsfiddle.net/Hafizu/763pchwz/6 — Aslam H, Apr 23 '20 at 18:07

Laravel: Append using vue js

0 Answers0