Question

面对vue.js中的奇怪问题。输入值未显示。

我的代码：

<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>

当我使用{{ row.item.MIN }}时，可以正常工作并显示价值。请说明为什么它不绑定:value或任何其他选择？

有什么建议吗？

完整源代码

<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>

Answer 1

您不能同时使用v-model和value。 V-model是value和@input的组合。如果使用值，则必须使用@change或@input更改值并删除v-model。或者，仅使用v-model。

vue.js b-form-input未绑定值

1 个答案: