why v-model value is be trimmed？

[dontworrywearetogether]

I'm use v-model for select form, but get the return value is be trimmed, without last space, but I want keep the space...

here is part of template

<div class="col-md-5">
        <!-- get current prd and return sub list to next level -->
        <div class="form-group">
            <label for="productName">商品系列:</label>
            <select v-model="prdName" @change="clickPrd" id="productName">
                <option v-for="(prd, index) in tree_list" :key="prd.name">{{ prd.name }}</option>
            </select>
        </div>
        <div class="form-group">
            <label for="productSub">商品名称:</label>
            <select v-model="subName" @change="clickSub" id="productSub">
                <option v-for="(subname, index) in subData" :key="subname.name">{{ subname.name }}</option>
            </select>
        </div>
        <div class="form-group">
            <label for="productSpec">商品规格:</label>
            <select v-model="specName" v-if="specData.length >=1">
                <option v-for="(spec, index) in specData" :key="spec.name">{{ spec.name }}</option>
            </select>
        </div>
</div>

here is part of script

setup(){
const state = reactive(
            {
                pd_list:[],
                prdName:"",
                subData:[],
                subName:"",
                specData:[],
                specName:"",
            });

            const clickSub = ()=>{
            console.log('click sub:',state.subName)
            console.log('click sub length:',state.subName.length)
            
            state.subData.filter(x=>{
                console.log('compare:', x)
                console.log(x.name,x.name.length, 'is equal', state.subName, state.subName.length, x.name ==state.subName)
                if(x.name === state.subName){
                    state.specData = x.sub
                    console.log('specData:',state.specData)
                    state.specImg = x.sub[0].sub.pic
                    console.log('xxx:',x, x.sub[0].sub.pic)
                }else{
                    
                    state.specName = state.subData[0].name
                }
            })
           return  {
            clickSub
        }
            
}

after browser get result

the number 22, 23 is the text length value, miss last space T.T

here is an sample:

https://play.vuejs.org/#eNqlVL1yEzEQfpUdNbYZx/nxQDLG9vAzKaAIDEmHKC53sqNYJ91IOnOMxwUdDQVDS0PHA9DwQOY52JXubMeYNDR32v2+/bT6VncL9rQoevNSsAEbutTKwoMTvizGXMu8MNbDAqyYdPGRpF7OBSxhYk0OLSxqcc11arTzUMFoTWkvuAbQSS4GLYCqAmh1KePK64uQjKFSAziqV1dW5k3kiiQVFyXFXC87jzebZIlPcJ+3xELR1dePq8/fV19+4PPh0fTBadT9L+T3t081cnK2W/TrZw31+4/2Cp6eomB92B1Fgv6hSBAq7tZFyeM+NblfM2AnZ38VBtUABlmu320sxBmkSqazUbszGoc5VT2l0NSqV4+np4Se+psGosncgT0m2p2aFXZGrB7ZHaIrlPTtFrQaMhwc40CpF66Hh/G24T3DwIu8UIkXIQIYOqFE6mF+kJtMqBFna1XOQGaYKKzJytRflteYeRKPxFlzOs5QiSwZmsJLo1FpYiwgo40UupldkDoTVQdf4VqhymAmPkQNIqDEYkF2UQDL5fAwSgVh7D50GIObE6SSV8TCICbtGMIik/OYKcZkXS4yiHYMIFaRw1RJ31ygBTchNaX2A6I07m6RDhtVcnLLPdZl3uGkJ3Lau3VG42cdhsxZavJCKmFfhVM4znD76BFniVLm/cuQ87YU9XXCmhuRzvbkb11FOc5eW+GEnaNZa8wndip8hM8vL0SF6zWI4ywVsu8B3whnVEk9RtqzUmfY9hYvdPsi/Jyknl6588oL7ZpDUaPEXAY+Z/iben7P0Tft9nv9UIdXlC3/ADV1zIk=

[Alfred-Skyblue]

I hope you can provide a minimal reproducible example, otherwise it will be difficult to troubleshoot the issue.

[dontworrywearetogether]

here is an sample:

https://play.vuejs.org/#eNqlVL1yEzEQfpUdNbYZx/nxQDLG9vAzKaAIDEmHKC53sqNYJ91IOnOMxwUdDQVDS0PHA9DwQOY52JXubMeYNDR32v2+/bT6VncL9rQoevNSsAEbutTKwoMTvizGXMu8MNbDAqyYdPGRpF7OBSxhYk0OLSxqcc11arTzUMFoTWkvuAbQSS4GLYCqAmh1KePK64uQjKFSAziqV1dW5k3kiiQVFyXFXC87jzebZIlPcJ+3xELR1dePq8/fV19+4PPh0fTBadT9L+T3t081cnK2W/TrZw31+4/2Cp6eomB92B1Fgv6hSBAq7tZFyeM+NblfM2AnZ38VBtUABlmu320sxBmkSqazUbszGoc5VT2l0NSqV4+np4Se+psGosncgT0m2p2aFXZGrB7ZHaIrlPTtFrQaMhwc40CpF66Hh/G24T3DwIu8UIkXIQIYOqFE6mF+kJtMqBFna1XOQGaYKKzJytRflteYeRKPxFlzOs5QiSwZmsJLo1FpYiwgo40UupldkDoTVQdf4VqhymAmPkQNIqDEYkF2UQDL5fAwSgVh7D50GIObE6SSV8TCICbtGMIik/OYKcZkXS4yiHYMIFaRw1RJ31ygBTchNaX2A6I07m6RDhtVcnLLPdZl3uGkJ3Lau3VG42cdhsxZavJCKmFfhVM4znD76BFniVLm/cuQ87YU9XXCmhuRzvbkb11FOc5eW+GEnaNZa8wndip8hM8vL0SF6zWI4ywVsu8B3whnVEk9RtqzUmfY9hYvdPsi/Jyknl6588oL7ZpDUaPEXAY+Z/iben7P0Tft9nv9UIdXlC3/ADV1zIk=

[Alfred-Skyblue]

See playground

The option tag automatically removes leading and trailing spaces from the label. You should bind the value to the option tag instead of using the label as the option.

[dontworrywearetogether]

thankyou, solved, why The option tag automatically removes leading and trailing spaces from the label. ?

[Alfred-Skyblue]

This is a native issue in HTML, and I haven't found relevant documentation. You can create an HTML file for testing purposes.

[dontworrywearetogether]

Thankyou .