How iview Select Option uses slot

<Select v-model="scoreQuType" style="width:200px">
      <Option value="4">
        <div slot>NewYork</div>
      </Option>
      <Option value="shanghai">London</Option>
      <Option value="shenzhen">Sydney</Option>
    </Select>
    
    data () {
      return {
        scoreQuType: "4"
      }  
    }

could you tell me how to write slot? This allows the drop-down to be selected, but it is still displayed in Select. Please select it manually. You must select it once manually to

.
Iview vue.js
May.22,2021

you need to define a label attribute, like this 

<template>
    <div>
        <Select v-model="scoreQuType" style="width:200px">
            <Option value="4" label="NewYork">
                <div slot>NewYork</div>
            </Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                scoreQuType: '4'
            }
        },
        mounted(){
            console.log(this.scoreQuType)
        }
    }

</script>
The

select box will display the value of this label, which will lead to this situation if it is not defined.
if the content of the slot definition is more complex, Select component does not know what is expected to be displayed in the box when you want to select it. If all is displayed, there may be more content, resulting in some styles being confused, so you need to define a label to tell Select component what is displayed in the box.

Previous: How to use tweenjs in angular4/Ionic3 (urgent! Wait on the line! )

Next: How to select the input value in a drag element

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu