在点击方法vue js上显示元素答案

【问题标题】：Showing element on click method vue js在点击方法vue js上显示元素
【发布时间】：2019-05-15 22:21:11
【问题描述】：

我想在用户点击 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;
        }
    }
});

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

替换

show_resume_upload: true;

有

this.show_resume_upload = true;

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

【讨论】：

哈哈每个人都会遇到@Brad。如果它适合您，那么您可以将答案标记为已接受。

【解决方案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>

【讨论】：