如何使用核心ui模板在vue js中获取选定的值

Posted 2023-02-16

【中文标题】如何使用核心ui模板在vue js中获取选定的值

【英文标题】：How to get selected value in vue js with core ui template

【发布时间】：2020-11-08 04:51:42

【问题描述】：

我正在使用带有核心 ui 模板的 vue js，我在这样的模式中有一个选择标签

<CModal
    title="Tambah komoditi"
    :show.sync="addModal"
    color="primary"
  >
    <template>
        <div>
            <CForm v-on:submit="addData">
                <CRow>
                    <CCol>
                        <CSelect
                        label="Tipe Komoditi"
                        v-model="form.tipe_komoditi_id"
                        :options="options.option_tipe_komoditi"
                        />
                    </CCol>
                </CRow>
                <CButton type="submit" size="sm" v-if="!updateSubmit" color="primary"><CIcon name="cil-check-circle"/> Add</CButton>
                <CButton type="button" size="sm" v-else color="primary" @click="updateData"><CIcon name="cil-check-circle"/> Update</CButton>
            </CForm>
        </div>
    </template>
  </CModal>

这是我的脚本

export default 
   name: 'Produk',
   data () 
      return 
        form: 
            tipe_komoditi_id: null,
        ,
        options: 
            option_tipe_komoditi: [
                
                    value: 1,
                    label: 'Satu'
                ,
                
                    value: 2,
                    label: 'Dua'
                
            ]
        ,
        addModal: false,
        updateSubmit: false
      
   ,
   methods: 
       addData (e) 
         e.preventDefault();
         
       
   

我想在单击提交按钮（添加按钮）时控制台记录所选选项，我已阅读此模板的文档

https://coreui.io/vue/docs/components/form-components.html#cselect-api

还有一个叫做 :value 的道具，但我不知道如何使用它，因为根本没有例子。 我怎样才能获得选定的选项？

【参考方案1】：

你可以使用:value.sync="form.tipe_komoditi_id"

您可以在 coreui 项目中搜索 CSelect。 Forms.vue 文件中有一些示例。