【问题标题】:How to show default value in b-form-input? in Vue如何在 b-form-input 中显示默认值?在 Vue 中
【发布时间】:2019-07-04 07:54:15
【问题描述】:

嗨,我需要设置输入的默认值。该怎么做?

我尝试输入 :value="amount" 但它不起作用。 当我只使用没有输入的文本时,看起来我看不到可变数量。

<template>
    <div>
        <slot name="mass-buttons"></slot>
        <b-table
                striped hover :busy="isBusy" :fields="fields" :items="items" :show-empty="true"
                :empty-text="'Nebyly nalezeny žádné záznamy'"
        >

            <template slot="unit_price">
                <div class="form-group">
                    <b-form-input type="text" class="form-control w-100" size="sm" >
                    </b-form-input>
                </div>
            </template>

        </b-table>
    </div>
</template>

<script>
    export default {
        name: "CustomItemGrid",
        props: {
            isBusy: {
                type: Boolean,
                required: true
            },
            fields: {
                type: Array,
                required: true
            },
            items: {
                type: Array,
                required: true
            },
            test: "Hello"
        }
    }
</script>

我正在从另一个组件向组件发送这个:

  gridItemsFields: [
                    {key: 'name', label: 'Název'},
                    {key: 'unit_price', label: 'Cena za jednotku bez DPH'},
                    {key: 'amount', label: 'Množství',formatter:'test'},
                    {key: 'total_price', label: 'Cena celkem bez DPH'},
                    {key: 'actions', label: ''}
                ],

编辑: 我在模板中添加了属性 slot-scope=data,现在我可以通过 data.amount 查看数量,但仍然不能通过 :value 或 v-model 将其用作默认值。

【问题讨论】:

  • 在您的输入中尝试v-model = amount,而不是:value="amout"
  • 你使用的是 bootstrap-vue 还是 buefy?
  • 我正在使用 bootstrap-vue 并且 v-model 不起作用。
  • 我应该在模板中有属性slot-scope吗?

标签: javascript vue.js


【解决方案1】:

这解决了我的问题:

<template slot="amount" slot-scope="data">
    <div class="form-group">
        <b-form-input type="text" class="form-control w-100" size="sm" v-model="data.item.amount">
        </b-form-input>
     </div>
</template>

【讨论】:

  • 什么解决了您的问题?你能解释一下吗?
猜你喜欢
  • 2020-07-07
  • 2016-12-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-19
  • 1970-01-01
  • 2022-10-18
  • 2020-09-21
相关资源
最近更新 更多