Showing element on click method vue js

Question

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;
        }
    }
});

Felippe Duarte · Accepted Answer · 2018-12-14 16:14:27Z

1

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.

answered Dec 14, 2018 at 16:14

Felippe Duarte

15.2k2 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felippe Duarte Over a year ago

haha happens to everyone @Brad . If it works for you, then you can mark the answer as accepted.

Boussadjra Brahim · Accepted Answer · 2018-12-14 16:17:13Z

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>

Collectives™ on Stack Overflow

Showing element on click method vue js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related