Set initial content

[marekkaczkowski]

Hey,
I'm trying to fill Brace with data that I receved from response <brace>{{ jsonData }}</brace> jsonData is defined in data container but then nothing happens. Works ok for regular textarea.
Do I have to use Ace mechanism like editor.setValue(jsonData)?

Thanks 😁

[igorbabko]

You can try to use v-html="jsonData"

[marekkaczkowski]

v-html breaks Brace instance 😢

<template>
    <div class="block is-flex">
        <brace style="height: 300px" v-html="jsonDetails" :mode="'json'">
        </brace>
    </div>
</template>

<script>
import Vue from 'vue'
import Brace from 'vue-bulma-brace'

export default {
  components: {
    Brace
  },

  data () {
    return {
      jsonDetails: ''
    }
  },

  methods: {
    openJson (event) {
      var url = 'url to my api'
      var self = this

      this.$http.get(url).then(response => {
        self.jsonDetails = JSON.stringify(response.body, null, 2)
      }, response => {
        console.log(String(response.body))
      })
    }
  }
}
</script>

@fundon can you tell us if it is possible at the moment? Looks like it lacks of method setValue like:

    setValue (value) {
      editor.setValue(value)
    }

Thanks

[rankam]

@marekkaczkowski I was having the same issue and this worked for me.

<template>
    <brace style="height: 500px; margin-left: 20px"
      :fontsize="'22px'"
      :theme="'monokai'"
      :mode="'javascript'"
      :codefolding="'markbegin'"
      :softwrap="'free'"
      :selectionstyle="'text'"
      :highlightline="true">
    </brace>
</template>

<script>
import Brace from 'vue-bulma-brace';
import * as brace from 'brace';
var editor 

export default {
  components: {
    Brace
  },
  data() {
    return {
      events: []
    }
  },
  mounted() {
    this.$http.get('/event_schema').then(response => {
        this.events = response.data
        this.editor = brace.edit('vue-bulma-editor')
        this.editor.session.setValue(JSON.stringify(this.events))
    })
  }
}
</script>

[marekkaczkowski]

Yes! Thanks @rankam, works like a charm ✨
I had to modify source a bit cuz there is a hardcoded id 'vue-bulma-editor' here is pull req #5 👍