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

Question

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

<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();
         
       }
   }
}

我想 console.log 单击提交按钮（添加按钮）时的 selected 选项，我已阅读此模板的文档

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

还有一个叫 :value 的道具，但我不知道如何使用它，因为根本没有示例。我如何获得 selected 选项？

Answer 1

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

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

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

How to get selected value in vue js with core ui template

javascript

vue.js

core-ui