简体   繁体   中英

How to show default value in b-form-input? in Vue

Hi i need to set default value of input. How to do that?

i tried to put in input :value="amount" but it not works. When I use just text without input it looks like i can't see variable 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>

I am sending to component this from another component:

  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: ''}
                ],

看起来如何

Edit: I added attribute slot-scope=data to template and now i can see amount by data.amount but still can't use it as default value by :value or by v-model.

This solved my problem:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM