jetformbuilder
/
assets
/
src
/
admin-vuex-package
/
components
/
TableColumns
/
pre
/
ColumnPre.vue
jetformbuilder
/
assets
/
src
/
admin-vuex-package
/
components
/
TableColumns
/
pre
Last commit date
ColumnPre.vue
2 years ago
index.js
2 years ago
ColumnPre.vue
40 lines
| 1 | <template> |
| 2 | <span> |
| 3 | <pre v-html="parsedValue" v-if="isShowOverflow"></pre> |
| 4 | <span v-else>{{ value }}</span> |
| 5 | </span> |
| 6 | </template> |
| 7 | |
| 8 | <script> |
| 9 | import ScopeStoreMixin from '../../../mixins/ScopeStoreMixin'; |
| 10 | |
| 11 | export default { |
| 12 | name: 'pre--item', |
| 13 | props: [ 'value', 'full-entry', 'entry-id', 'scope' ], |
| 14 | mixins: [ ScopeStoreMixin ], |
| 15 | computed: { |
| 16 | isShowOverflow() { |
| 17 | return this.getter( 'options/isShowOverflow' ); |
| 18 | }, |
| 19 | parsedValue() { |
| 20 | let json; |
| 21 | try { |
| 22 | json = JSON.parse( this.value ); |
| 23 | } catch ( error ) { |
| 24 | return this.value; |
| 25 | } |
| 26 | return JSON.stringify( json, undefined, 4 ); |
| 27 | }, |
| 28 | }, |
| 29 | methods: {}, |
| 30 | }; |
| 31 | </script> |
| 32 | |
| 33 | <style lang="scss"> |
| 34 | .jet-form-builder-page { |
| 35 | pre { |
| 36 | margin: unset; |
| 37 | overflow: auto; |
| 38 | } |
| 39 | } |
| 40 | </style> |