yansenlei / VJsoneditor

:large_blue_diamond: vue use jsoneditor
https://yansenlei.github.io/VJsoneditor/
Apache License 2.0
182 stars 45 forks source link

add class #37

Open lng0415 opened 3 years ago

lng0415 commented 3 years ago

Hi. i cant understand onClassName option. how to use that? ex) if select city, add class to city

<v-jsoneditor v-model="cities" :options="vjsonOpt"></v-jsoneditor>

<select cities.....  v-model='city'>
  <option ...>
...
<script>
export default {
  data() {
    return {
      city: null,
      vjsonOpt: {
        mode: 'view',
        onClassName: function(node) {
           if (this.city) {
             if (node.field == 'london') {
               // set textRed
             } else if (node.field == 'newyork') {
               // set textBlue
             } else {
             }
          }
        }
      },
      cities: {
        london: 'uk',
        newyork: 'usa'
        ottawa: 'canada',
        paris: 'france'
      }
    }
  },
  methods: {
  }
}
</script>
<style>
.textRed {color: #e42e21;}
.textBlue {color: #1404ee;}
</style>
yansenlei commented 3 years ago

Hi, @lng0415 You can read the jsoneditor documentation: https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options?blank