时间戳

首页 > 解决方案 > 如何使用 axios.post 发布选择输入选项值？

vue.js - 如何使用 axios.post 发布选择输入选项值？

问题描述

我尝试使用 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-model 进行选择，但没有任何效果。我实际上不知道如何在 axios 函数中获取发布的值。谢谢您的建议。

标签： vue.jsaxios

解决方案

  1. 为每个值定义数据
data() {
  return {
     ...
     oc_id: '',
     sub_id: '',
  }
}
  1. 使用绑定数据到输入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>
  1. 随时随地使用数据
addMatch() {
  axios.post("/ocs", {
      oc_id: this.oc_id,
      sub_id: this.sub_id
  })
  ...
}

推荐阅读