时间戳

首页 > 解决方案 > 如何在 vuejs 中使用 ajax/json 修复输入动态类别选择下拉列表

javascript - 如何在 vuejs 中使用 ajax/json 修复输入动态类别选择下拉列表

问题描述

我正在开发一个类别选择模板，其中包含先前的选择。但是，如果我更改选择，则选择仅适用于“首次加载”，因此我得到行为错误。（这取消选择父级）

我需要一个“光”。

这是项目的链接 https://zimeonline.com.br

我尝试在组件中的每个 ajax 中更改对象 vue data()

<template>
    <div>
        <select @change="category()" v-model="selectedId" v-bind:key="option[0].id"  v-for="option in options" class="browser-default custom-select">
          <option  v-bind:value="op.id" v-bind:selected="op.selected==1" v-bind:key="op.id" v-for="op in option">{{op.name}}</option>
        </select>
    </div>
</template>
<script>
    export default {
        name: "ProductFormCategory",
        data() {
            return {
                options: {},
                selectedId:''
            }
        },
        created() {
            let vm = this;
            vm.category();
        },
        methods: {
            async category() {
                let vm = this;
                await vm.$http.get('category/'+vm.selectedId).then(function (response) {
                    vm.options = response.data;
                }).catch(function () {
                });
               vm.$forceUpdate();
            },
        }
    }
</script>

<style scoped>
    .browser-default{
        margin-bottom: 10px !important;
    }
</style>

this URL list ALL FATHER categorys
https://api.zimeonline.com.br/api/category

this URL list ALL CHILDREN categorys
https://api.zimeonline.com.br/api/category/some_id(from father category)

exemple: https://api.zimeonline.com.br/api/category/5

Then 5 is ID from  https://api.zimeonline.com.br/api/category

这里是 atual 代码选择 https://zimeonline.com.br的示例 （第一次有点慢）

标签： javascriptjsonvue.js

解决方案

Solution for category basead from parent id with select input  option sub-menu
<script>
export default {
    name: "ProductFormCategory",
    props:{
      setCategoryId:String
    },
    data() {
        return {
            options: {},
            categoryId: ''
        }
    },
    created() {
        let vm = this;
        vm.categoryId = vm.setCategoryId || ('');
        vm.category();
    },
    methods: {
        async category(event) {
            let vm = this;
            if (event) {
               vm.categoryId = (event.target.value);
            }
            await vm.$http.get('category/' + vm.categoryId).then(function (response) {
                vm.options = response.data;
            }).catch(function () {
            });
        },
    }
}


<template>
<div>
    <select
            @change="category($event)"
            v-bind:key="option[0].id"
            v-for="option in options"
            class="browser-default custom-select">
        <option value="">Selecione uma categoria</option>
        <option
                v-bind:value="op.id"
                v-bind:selected="op.selected==1"
                v-bind:key="op.id"
                v-for="op in option">
                {{op.name}}
        </option>
    </select>
</div>

推荐阅读