时间戳

首页 > 解决方案 > 在点击方法vue js上显示元素

javascript - 在点击方法vue js上显示元素

问题描述

我想在用户单击 on click resume_radio 方法中的单选输入时显示 div。

<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>

为简单起见，我只是在点击时将其设置为 true。

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

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

您在this方法中缺少：

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>

推荐阅读