Form Inputs - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/form-inputs

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-input v-model="text" type="textarea" placeholder="Enter your name" :state="text.length?'success':'warning'" :formatter="format"></b-form-input>
  <small class="text-muted">We will convert your name to lowercase instantly</small>

  <br>
  <br>

  <b-form-input v-model="text" type="textarea" placeholder="Enter your name" :state="text.length?'success':'warning'" :formatter="format" lazy-formatter></b-form-input>
  <small class="text-muted">This one is a little lazy!</small>

  <br>
  <br>

  <b-form-input textarea v-model="text" placeholder="Text area mode"></b-form-input>

  <br>
  <p>Value: {{text}}</p>
</div>

CSS

#app {
  padding: 20px;
  height: 350px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    text: '{"chart": {"type": "line", "borderColor": "#000", "borderWidth": 1, "backgroundColor": "#FFFFFF", "plotBorderColor": "#FFFFFF", "plotBorderWidth": 1, "plotBackgroundColor": "#FFFFFF"}, "table": {"text": "school", "group": "subject_name", "where": "", "aggreFun": ""}, "title": {"text": ""}, "xAxis": {"title": {"text": ""}, "column": "first_name", "lineColor": "black", "lineWidth": 3, "plotLines": [{"color": "red", "label": {"text": "", "align": "center"}, "value": null, "width": 0}], "categories": ["Amal", "Ashen", "Ranuka"]}, "yAxis": {"title": {"text": ""}, "column": "marks", "lineColor": "black", "lineWidth": 3, "plotLines": [{"color": "red", "label": {"text": "", "align": "center"}, "value": null, "width": 0}]}, "legend": {"align": "center", "layout": "horizontal", "borderWidth": 0, "verticalAlign": "bottom"}, "series": "", "credits": {"enabled": false}, "tooltip": {"padding": 8, "valuePrefix": "", "valueSuffix": "", "valueDecimals": 0}, "sub_table": {"text": "school", "group": "", "where": "", "x_axis": "", "y_axis": "", "subAggreFun": "SUM", "sub_chart_type": ""}, "plotOptions": {"series": {"color": "#582b6e", "stacking": ""}}}',
  },
  methods: {
    format(value) {
      return value.toLowerCase();
    }
  }
})