Как опубликовать выбранное значение параметра ввода с помощью axios.post?

Question

Я пытался опубликовать выбранные входные значения с помощью axios, но я не знаю, как их опубликовать.

Это мой компонент

   <form action="" @submit.prevent="addMatch">
        <div class="row">
            <div class="col-md-4">
                <label for="" class="form-control">OpenCart Categories</label>
                <select  multiple class="form-control">
                    <option v-for="(oclist , index) in oclists" :value="oclists">{{ oclist.name }}</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="" class="form-control" v-if="sublists.length>0">N11 Sub Categories</label>
                <select   multiple class="form-control" v-if="sublists.length>0">
                    <option v-for="(sublist , index) in sublists" @click="getSub(sublist.id)" :value="sublists">{{ sublist.name }}
                    </option>
                </select>
            </div>
            <div class="mt-5 mx-auto">
                <button class="btn btn-success btn-lg">Match</button>
            </div>
        </div>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                toplists: [],
                oclists: [],
                sublists: [],
                error: null,
                meta: {},
                item: {}
            }
        },
        created() {
            this.fetchData();
            this.fetchOcData();
        },
        methods: {
            addMatch() {
                axios.post("/ocs", {
                    oc_id: ???,
                    sub_id:???
                })
                    .then(response => {

                    })
                    .catch(error => {
                        this.error = error.response.data.message;
                    });

            }
        }

    }
</script>

Я попробовал несколько способов v-модели длявыберите, но никак не работал. Я не знаю, как получить объявленные значения в функции axios на самом деле. Спасибо за советы.

Answer 1

1. Определение данных для каждого значения

data() {
  return {
     ...
     oc_id: '',
     sub_id: '',
  }
}

Привязка данных к входам с использованием v-model

<select v-model="oc_id" multiple class="form-control">
    <option v-for="(oclist , index) in oclists" :key="oclist.id" :value="oclist.id">{{ oclist.name }}</option>
</select>
...
<select  v-model="sub_id" multiple class="form-control" v-if="sublists.length>0">
   <option v-for="(sublist , index) in sublists" :key="sublist.id" :value="sublist.id">{{ sublist.name }}</option>
</select>

Используйте данные везде, где хотите

addMatch() {
  axios.post("/ocs", {
      oc_id: this.oc_id,
      sub_id: this.sub_id
  })
  ...
}