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>