CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
Brad
Brad

Reputation: 12262

Showing element on click method vue js

I want to display the div when the user clicks the radio input in the on click resume_radio method.

<form id="apply">
<p>Resume</p>
<label for="fields[resumeApplication]">
    <input type="radio" name="fields[resumeApplication]" @click="resume_radio" value="onFile" required>
    Use my resume on file
</label>

<label for="fields[resumeApplication]">
    <input type="radio" name="fields[resumeApplication]" @click="resume_radio" value="uploadFile" required>
    Upload a resume for this application
</label>

<div v-show="show_resume_upload">
    <label for="fields[resumeAttachment]">Resume upload</label>
    <input type="file" name="fields[resumeAttachment]">
</div>
</form>

I am just setting it to true on click for simplicity.

var app = new Vue({
    el: 'form#apply',
    delimiter: ['{}'],
    data: {
        show_resume_upload: false,
    },
    methods: {
        resume_radio: function (event) {
            show_resume_upload: true;
        }
    }
});

Upvotes: 0

Views: 147

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're missing this inside your method :

var app = new Vue({
  el: 'form#apply',
  delimiter: ['{}'],
  data: {
    show_resume_upload: false,
  },
  methods: {
    resume_radio: function(event) {
     this.show_resume_upload= true;
    }
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<form id="apply">
  <p>Resume</p>
  <label for="fields[resumeApplication]">
    <input type="radio" name="fields[resumeApplication]" @click="resume_radio" value="onFile" required>
    Use my resume on file
</label>

  <label for="fields[resumeApplication]">
    <input type="radio" name="fields[resumeApplication]" @click="resume_radio" value="uploadFile" required>
    Upload a resume for this application
</label>

  <div v-show="show_resume_upload">
    <label for="fields[resumeAttachment]">Resume upload</label>
    <input type="file" name="fields[resumeAttachment]">
  </div>
</form>

Upvotes: 1

Felippe Duarte
Felippe Duarte

Reputation: 15131

Replace

show_resume_upload: true;

With

this.show_resume_upload = true;

Then you will update the attribute (the property inside data) to true, and VueJs will display the div.

Upvotes: 1

Related Questions