el-チェックボックス-設定値とラベルをグループ化します

ドキュメントには、送信されたデータが何であるかを示す方法しか書かれてい
ませんが、バックエンドからそのようなデータが返されることがあります

 [
    {
    
    
        value: 1,
        label: 'LPS主服务'
    },
    {
    
    
        value: 2,
        label: 'Nginx服务'
    },
    {
    
    
        value: 3,
        label: 'Memcached服务'
    },
    {
    
    
        value:4,
        label: 'Redis服务'
    },
    {
    
    
        value: 5,
        label: 'LibreOffice服务'
    }
],

バックエンドが必要としているのは値の配列であり、ラベルを使用することを示している
ため、ページは次のように記述できます

<template>
    <div class="app">
         <el-form-item label="请选择：">
           <el-checkbox-group
                 v-model="form.DeployedServices"
             >
                 <el-checkbox
                   v-for="city in cities"
                   :label="city.value"
                   :key="city.value"
                 >{
   
   { city.label }}
                 </el-checkbox>
             </el-checkbox-group>
         </el-form-item>
    </div>
</template>

<script>
export default {
     
     
    data() {
     
     
        return {
     
     
            form:{
     
     
                DeployedServices: []
            },
            cities: [
			    {
     
     
			        value: 1,
			        label: 'LPS主服务'
			    },
			    {
     
     
			        value: 2,
			        label: 'Nginx服务'
			    },
			    {
     
     
			        value: 3,
			        label: 'Memcached服务'
			    },
			    {
     
     
			        value:4,
			        label: 'Redis服务'
			    },
			    {
     
     
			        value: 5,
			        label: 'LibreOffice服务'
			    }
			],
        }
    }
}
</script>

このようにして、表示と値の分離を実現できます。