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>

我尝试了一些选择模型的方法，但没有任何效果。我真的不知道如何在axios函数中获取发布的值。谢谢您的建议。

Answer 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
  })
  ...
}

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

1 个答案: