title: vuejs b-form-input not binding value
body: <p>Facing strange issue in vue.js. Input value is not showing.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;template slot="MIN" slot-scope="row"&gt;
    &lt;b-form-input
      :value="row.item.MIN"
      v-model="model.Min[row.item.id]"
      @change="changeField('MIN', model.Min, row.item.id)"
    &gt;&lt;/b-form-input&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Work fine and display value when I use <code>{{ row.item.MIN }}</code>.
  Please guide why it is not binding the <code>:value</code> or any other alternative?</p>
  
  <p>Any suggestion?</p>
  
  <p>Full source code</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-card&gt;
        &lt;template slot="header"&gt;
          &lt;div class="card-options" v-if="this.$app.user.can('create fee')"&gt;
            &lt;b-button to="/fee/create" variant="success" size="sm"&gt;
              &lt;i class="fe fe-plus-circle"&gt;&lt;/i&gt; {{ $t('buttons.fee.create') }}
            &lt;/b-button&gt;
          &lt;/div&gt;
        &lt;/template&gt;
        &lt;b-datatableinventory
          ref="datasource"
          @context-changed="onContextChanged"
          search-route="admin.fee.search"
          delete-route="admin.fee.destroy"
          action-route="admin.fee.batch_action"
          :actions="actions"
          :selected.sync="selected"
        &gt;
          &lt;b-table
            ref="datatable"
            striped
            show-empty
            stacked="md"
            no-local-sorting
            :empty-text="$t('labels.datatables.no_results')"
            :empty-filtered-text="$t('labels.datatables.no_matched_results')"
            :fields="fields"
            :items="dataLoadProvider"
            sort-by="fee.id"
            :sort-asc="true"
          &gt;
            &lt;template slot="HEAD_checkbox" slot-scope="data"&gt;&lt;/template&gt;
            &lt;template slot="checkbox" slot-scope="row"&gt;
              &lt;b-form-checkbox
                :value="row.item.id"
                v-model="selected"
              &gt;&lt;/b-form-checkbox&gt;
            &lt;/template&gt;
  
  
            &lt;template slot="FEE" slot-scope="row"&gt;
              &lt;b-form-input
                :value="model.FEE[row.item.id]"
                @change="changeField('FEE', row.item.FEE, row.item.id)"
              &gt;
  
              &lt;/b-form-input&gt;
            &lt;/template&gt;
  
  
            &lt;template slot="MIN" slot-scope="row"&gt;
              &lt;b-form-input
                :value="row.item.MIN"
                v-model="model.Min[row.item.id]"
                @change="changeField('MIN', model.Min, row.item.id)"
              &gt;&lt;/b-form-input&gt;
            &lt;/template&gt;
            &lt;template slot="MAX" slot-scope="row"&gt;
              &lt;b-form-input
                :value="row.item.MAX"
                v-model="model.Max[row.item.id]"
                @change="changeField('MAX', model.Max, row.item.id)"
              &gt;&lt;/b-form-input&gt;
            &lt;/template&gt;
            &lt;template slot="get_country" slot-scope="row"&gt;
              &lt;span&gt;
                {{ row.item.get_country.country }} ({{
                  row.item.get_country.code
                }})
              &lt;/span&gt;
            &lt;/template&gt;
            &lt;template slot="actions" slot-scope="row"&gt;
              &lt;b-button
                v-if="row.item.id"
                size="sm"
                variant="danger"
                v-b-tooltip.hover
                :title="$t('buttons.delete')"
                @click.stop="onDelete(row.item.id)"
              &gt;
                &lt;i class="fe fe-trash"&gt;&lt;/i&gt;
              &lt;/b-button&gt;
            &lt;/template&gt;
          &lt;/b-table&gt;
        &lt;/b-datatableinventory&gt;
      &lt;/b-card&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
    name: 'FeeList',
    data() {
      return {
        selected: [],
        model: {
          Fee: [],
          Min: [],
          Max: []
        },
        fields: [
          { key: 'checkbox' },
          {
            key: 'FEE',
            label: 'FEE',
            sortable: true
          },
          {
            key: 'MIN',
            label: 'MIN',
            sortable: true
          },
          {
            key: 'MAX',
            label: 'MAX',
            sortable: true
          },
          {
            key: 'get_country',
            label: 'Country'
          },
          { key: 'actions', label: this.$t('labels.actions'), class: 'nowrap' }
        ],
        actions: {
          destroy: this.$t('labels.backend.fee.actions.destroy')
        }
      }
    },
    methods: {
      dataLoadProvider(ctx) {
        return this.$refs.datasource.loadData(ctx.sortBy, ctx.sortDesc)
      },
      onContextChanged() {
        return this.$refs.datatable.refresh()
      },
      onDelete(id) {
        this.$refs.datasource.deleteRow({ fee: id })
      },
      async changeField(type, field, id) {
       console.log( type, field, id )
  
        field[id] = parseFloat(field[id]).toFixed(2)
        var amount = field[id]
  
  
        // await axios
        //   .post(this.$app.route('admin.updateFee'), {
        //     field: type,
        //     amount: amount,
        //     id: id
        //   })
        //   .then(result =&gt; {
        //     if (result.data.status == 200) {
        //       this.onContextChanged()
        //       this.$app.noty['success'](result.data.message)
        //     }
        //   })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>