Question

当用户单击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;
        }
    }
});

Answer 1

替换

show_resume_upload: true;

使用

this.show_resume_upload = true;

然后，您将属性（data中的属性）更新为true，VueJ将显示div。

Answer 2

您的方法中缺少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>

在click方法中显示元素vue js

2 个答案: