Add vue component for save button and integrate into FormMixin
This commit is contained in:
parent
40a4e205d9
commit
3ece7b4c89
18
js/components/save_button.js
Normal file
18
js/components/save_button.js
Normal file
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
name: 'savebutton',
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
disabled: Boolean,
|
||||
classes: String,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
displayClasses: `usa-button usa-button-primary ${this.classes}`,
|
||||
}
|
||||
},
|
||||
|
||||
template:
|
||||
'<button type="submit" :class="displayClasses" tabindex="0" :disabled="disabled">{{ text }}</button>',
|
||||
}
|
@ -33,6 +33,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
|
||||
import DateSelector from './components/date_selector'
|
||||
import SidenavToggler from './components/sidenav_toggler'
|
||||
import KoReview from './components/forms/ko_review'
|
||||
import savebutton from './components/save_button'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@ -68,6 +69,7 @@ const app = new Vue({
|
||||
EditOfficerForm,
|
||||
SidenavToggler,
|
||||
KoReview,
|
||||
savebutton,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
@ -1,3 +1,5 @@
|
||||
import savebutton from '../components/save_button'
|
||||
|
||||
export default {
|
||||
mounted: function() {
|
||||
this.$root.$on('field-change', this.handleFieldChange)
|
||||
@ -8,7 +10,25 @@ export default {
|
||||
const { value, name } = event
|
||||
if (typeof this[name] !== undefined) {
|
||||
this[name] = value
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
disabled: this.disableSave,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
disableSave: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
savebutton,
|
||||
},
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user