0

Facing strange issue in vue.js. Input value is not showing.

My code:

<template slot="MIN" slot-scope="row">
  <b-form-input
    :value="row.item.MIN"
    v-model="model.Min[row.item.id]"
    @change="changeField('MIN', model.Min, row.item.id)"
  ></b-form-input>
</template>

Work fine and display value when I use {{ row.item.MIN }}. Please guide why it is not binding the :value or any other alternative?

Any suggestion?

Full source code

<template>
  <div>
    <b-card>
      <template slot="header">
        <div class="card-options" v-if="this.$app.user.can('create fee')">
          <b-button to="/fee/create" variant="success" size="sm">
            <i class="fe fe-plus-circle"></i> {{ $t('buttons.fee.create') }}
          </b-button>
        </div>
      </template>
      <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"
      >
        <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"
        >
          <template slot="HEAD_checkbox" slot-scope="data"></template>
          <template slot="checkbox" slot-scope="row">
            <b-form-checkbox
              :value="row.item.id"
              v-model="selected"
            ></b-form-checkbox>
          </template>


          <template slot="FEE" slot-scope="row">
            <b-form-input
              :value="model.FEE[row.item.id]"
              @change="changeField('FEE', row.item.FEE, row.item.id)"
            >

            </b-form-input>
          </template>


          <template slot="MIN" slot-scope="row">
            <b-form-input
              :value="row.item.MIN"
              v-model="model.Min[row.item.id]"
              @change="changeField('MIN', model.Min, row.item.id)"
            ></b-form-input>
          </template>
          <template slot="MAX" slot-scope="row">
            <b-form-input
              :value="row.item.MAX"
              v-model="model.Max[row.item.id]"
              @change="changeField('MAX', model.Max, row.item.id)"
            ></b-form-input>
          </template>
          <template slot="get_country" slot-scope="row">
            <span>
              {{ row.item.get_country.country }} ({{
                row.item.get_country.code
              }})
            </span>
          </template>
          <template slot="actions" slot-scope="row">
            <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)"
            >
              <i class="fe fe-trash"></i>
            </b-button>
          </template>
        </b-table>
      </b-datatableinventory>
    </b-card>
  </div>
</template>

<script>
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 => {
      //     if (result.data.status == 200) {
      //       this.onContextChanged()
      //       this.$app.noty['success'](result.data.message)
      //     }
      //   })
    }
  }
}
</script>

1 Answer 1

1

You can't use v-model and value at the same time. V-model is a combination of value and @input. If you use value you must use @change or @input to change the value and delete the v-model. OR, only use v-model.

Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for your reply.Okay now I need to get updated value of input box I already have a @change
So what's your changeField('MIN', model.Min, row.item.id) function doing?
Basically its getting updated value and id of input filed and updating database table.
Anything to say?
Why are you binding the values to model in your data ( v-model="model.Min[row.item.id]")? Why not bind it to your row.item.MIN? And for your @change function I think you can just do this to get the value: ` @change="changeField('MIN', $event)"` rather than passing the model and id to get the value. The $event should pass you the value of the input.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.