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

Question

I am using vue js with core ui template, I have a select tag inside a modal like this

<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>

and this is my script

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

i want to console.log the selected option when the submit button (add button) is clicked, i have read the documentation of this template

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

and there is props called :value, but i have no idea how to use it because there is no example at all. How i can get the selected option?

Elahe Elahe · Accepted Answer · 2020-07-29T23:38:23

you can use :value.sync="form.tipe_komoditi_id"

you can search for CSelect in coreui project. there are some examples in Forms.vue file.

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

1 Answers