How to change default mode as "Code" mode in VueJS

[fzs1994]

I've installed npm package in my vue app.
My Code:

<vue-json-editor v-model="$store.state.content" :showBtns="false" @json-change="onJsonChange"></vue-json-editor>

<script>
  import vueJsonEditor from 'vue-json-editor'
  export default {
    name:'json-viewer',
    data: () => ({
        json : {}
    }),
    components: {
      vueJsonEditor
    },
    methods: {
      onJsonChange (value) {
          this.$store.state.content = value
      }
    }
  }
</script>

[alexmgillis]

So I just start using this component (wrapper) but it seems that there is an object named options that passes mode (de starter mode) and modes an array of allowed modes (code, text, tree, form, ...) for what i gather this object is hardcoded in the component ... one request would be to add a prop for the options object and if nothing is passed then use the default option objet which is already in the code.

anybody coudl confirm if this is correct?
if so, iif this something manteiners would be interested? i could code a path/branch for review

[alexmgillis]

<template>
  <div>
    <div class="jsoneditor-vue"></div>
    <div class="jsoneditor-btns" v-if="showBtns!==false"><button class="json-save-btn" type="button" @click="onSave()" :disabled="error">保存</button></div>
  </div>
</template>

<script>
  import './assets/jsoneditor.css'
  import JsonEditor from './assets/jsoneditor'
  export default {
    props: ['value', 'showBtns',"mode","modes"],
    watch: {
      value: function (newValue) {
        if (!this.internalChange) {
          this.editor.set(newValue)
        }
      }
    },
    data () {
      return {
        editor: null,
        error: false,
        json: this.value,
        internalChange: false
      }
    },
    mounted () {
     var self = this;
     var mode="tree";
     var modes= ['tree', 'code', 'form', 'text', 'view'];
      if (this.mode!==undefined) mode=this.mode;
      if (!this.modes!== undefined) modes=this.modes;
     var options = {
        mode: mode,
        modes: modes, // allowed modes
        onChange () {
          try {
            var json = self.editor.get()
            self.error = false
          } catch (e) {
            self.error = true
            self.$emit('has-error')
          }
          if (!self.error) {
            self.json = json
            self.$emit('json-change', json)
            self.internalChange = true
            self.$emit('input', json)
            self.$nextTick(function () {
              self.internalChange = false
            })
          }
        }
      }
      this.editor = new JsonEditor(this.$el.querySelector('.jsoneditor-vue'), options, this.json)
    },
    methods: {
      onSave () {
        this.$emit('json-save', this.json)
      }
    }
  }
</script>

<style>
  .ace_line_group {
    text-align: left;
  }
  .json-editor-container {
    display: flex;
    width: 100%;
  }
  .json-editor-container .tree-mode {
    width: 50%;
  }
  .json-editor-container .code-mode {
    flex-grow: 1;
  }
  .jsoneditor-btns{
    text-align: center;
    margin-top:10px;
  }
  .jsoneditor-vue .jsoneditor-outer{
    min-height:150px;
  }
  .jsoneditor-vue div.jsoneditor-tree{
    min-height: 350px;
  }
  .json-save-btn{
    background-color: #20A0FF;
    border: none;
    color:#fff;
    padding:5px 10px;
    border-radius: 5px;
  }
  .json-save-btn:focus{
    outline: none;
  }
  .json-save-btn[disabled]{
    background-color: #1D8CE0;
  }
  code {
    background-color: #f5f5f5;
  }
</style>