当我提交表单而没有选择任何数据时，v-show 不起作用

Question

Html 模板

<div class="control-group">
<label for="MainContent_ddlCourse" id="MainContent_Label1" class="control-label">Course</label>
<div class="controls">
<select name="ctl00$MainContent$ddlCourse" id="MainContent_ddlCourse" class="input-block-level" v-model="selectedCourse" v-on:change="courseChanged">
<option value="">Please choose...</option>
<option v-for="course in courseList" v-bind:value="course.CourseId">{{ course.Name }}</option>
</select>
</div>
<p v-if="invalidCourse">Invalid Course Selected</p>
</div>

这是我的 JS

if (!this.selectedCourse) invalidCourse = true;

Answer 1

我假设你说的是v-if而不是v-show，你需要添加this才能使用 vue 数据

if (!this.selectedCourse) this.invalidCourse = true;

或者简单地逆转条件

<p v-if="!selectedCourse">Invalid Course Selected</p>