Skip to content

Instantly share code, notes, and snippets.

@andrea-ale-sbarra
Created July 24, 2017 08:56
Show Gist options
  • Save andrea-ale-sbarra/9f11297d675d8bfe9ab52deb31f199bd to your computer and use it in GitHub Desktop.
Save andrea-ale-sbarra/9f11297d675d8bfe9ab52deb31f199bd to your computer and use it in GitHub Desktop.
manage field via vue and checkbox
<div style="clear: both;"></div><br/>
<div class="control-group" id="enabledNotificationGroup">
<label class="control-label" for="enabledNotification">Enable Email Notification:</label>
<div class="controls">
<input type="checkbox" class="form-control input-xxlarge" th:field="*{enabledNotification}" id="enabledNotification" v-model="isEnabled" v-on:click="eraseValue" />
<span class="help-inline">
<span th:each="err : ${#fields.errors('enabledNotification')}" th:text="${err}"></span>
</span>
</div>
</div>
<div style="clear: both;"></div><br/>
<div class="control-group" id="notificationEmailGroup">
<label class="control-label" for="notificationEmail">Notification Email:</label>
<div class="controls">
<input type="text" class="form-control input-xxlarge" th:field="*{notificationEmail}" id="notificationEmail" :disabled="!isEnabled" v-model="inputValue" />
<span class="help-inline">
<span th:each="err : ${#fields.errors('notificationEmail')}" th:text="${err}"></span>
</span>
</div>
</div>
var vue = new Vue({
el : '#acerUserForm',
data : {
isEnabled : /*[[${userModel.enabledNotification}]]*/true,
inputValue : /*[[${userModel.notificationEmail}]]*/''
},
methods : {
eraseValue : function() {
if (!this.isEnabled) {
this.inputValue = '';
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment