基于 v-for 选择的选项返回数组

Question

我正在尝试循环进入一个数据数组，并且我还有其他文件可以根据第一个选择的选项进行选择。

但是当我更改一个 chiled 时，所有其他选择文件都重置为默认空。

这是我使用的代码：

模板：

<div class="row col-12" v-for="(ROW,rindex) in PARENT_ROWS" :key="rindex">
    <div class="form-group col-md-2 ">
        <label for="">CARS</label>
        <select2 :options="Cars" v-model="ROW['CATALOG_NAME']" required></select2>
    </div>
    <div class="form-group col-md-2 ">
        <label for="" v-if="ROW['build_for']=='A'">its for A</label>
        <select2 :options="optionsfor(ROW['CATALOG_NAME'])" v-model="ROW['RELATION']" required></select2>
    </div>

    <div class="form-group col-md-2 ">
        <label for="">Time</label>
        <select2 :options="timesFor(ROW['CATALOG_NAME'])" v-model="ROW['TIME']" required></select2>
    </div>

        <div class="form-group col-md-2" v-if="ROW['build_for']!='A'">
        <label for="">Detail</label>
        <select2 :options="detailsFor(ROW['CATALOG_NAME'])" v-model="ROW['DETAIL']" required></select2>
    </div>
</div>

脚本

<script>
export default {
    name : "Cars.CarsBuilder",
    data(){
        return {
            indexData:{
                cars : [],
            }
        }
    },
    created(){
        axios.post(URL_TO_API).then(response=>{
            this.indexData.cars = response.data;
             /**
             * data structure
             [
                 'CAR_NAME_1':  [
                     {TYPE_DATA:'',MDATA:''},
                     {TYPE_DATA:'',MDATA:''},
                     {TYPE_DATA:'',MDATA:''},
                 ],
                 'CAR_NAME_2':  [
                     {TYPE_DATA:'',MDATA:''},
                     {TYPE_DATA:'',MDATA:''},
                     {TYPE_DATA:'',MDATA:''},
                 ],
             ]
             */
        })
    },
    methods:{
        optionsfor(catalog_name){
            let find = this.$clone(this.indexData.cars[catalog_name]).filter(f=>f.TYPE_DATA=="C1");
            return find.reduce(function(obj,item){
                obj.push({id:item.MC1,text:item.MC1});
                return obj;
            },[]);
        },
        timesFor(catalog_name){
            let find = this.$clone(this.indexData.cars[catalog_name]).filter(f=>f.TYPE_DATA=="C2");
            return find.reduce(function(obj,item){
                obj.push({id:item.MC2,text:item.MC2});
                return obj;
            },[]);
        },
        detailsFor(catalog_name){
            let find = this.$clone(this.indexData.cars[catalog_name]).filter(f=>f.TYPE_DATA=="C3");
            return find.reduce(function(obj,item){
                obj.push({id:item.MC3,text:item.MC3});
                return obj;
            },[]);
        },
    },
}

当用户选择 Car 时，我通过 Key 进入 Cars 父级，然后对其进行一些过滤以获得更多选项，例如 Details 、 Time 和 Relation。

当我选择 Detail 或 Time 或 Relation 时出现问题，所有其他选择都默认/为空。

谢谢

Answer 1

您需要将反应属性绑定到您的过滤器。

然后在您的模板中引用它们，或使用包含项目和过滤器参数的计算属性。

您正在使用方法，但是当您更改过滤器时，它们不会重新计算。

Answer 2

在 Steven Spungin 回答之后，我做了这个改变，它对我有用：

1 - 首先：在 data() 中添加一个名为：CarsData 作为 Array 的新属性。

data(){
        return {
            CarsData : [],...} }...

2 - 创建一个方法“getCar(catalog_name)”，如果它不在汽车数据收集。

getCar(catalog_name){
            if(catalog_name==null || catalog_name==''){return;}
            if(!this.CarsData.hasOwnProperty(catalog_name)){
                this.CarsData[catalog_name] = {
                    optionsfor : this.optionsfor(catalog_name),
                    timesFor: this.timesFor(catalog_name),
                    detailsFor: this.detailsFor(catalog_name),
                };
            }
        }

3 - 在 CARS 选择选项中添加 :set="getCar(ROW['CATALOG_NAME'])。

<select2 :options="Cars" :set="getCar(ROW['CATALOG_NAME'])" v-model="ROW['CATALOG_NAME']" required></select2>

4 - 通过属性和目录名称替换选择中的方法调用

<select2 :options="CarsData[ROW['CATALOG_NAME']].optionsfor" v-model="ROW['RELATION']" required></select2>
<select2 :options="CarsData[ROW['CATALOG_NAME']].timesFor" v-model="ROW['TIME']" required></select2>
<select2 :options="CarsData[ROW['CATALOG_NAME']].detailsFor" v-model="ROW['DETAIL']" required></select2>

在 Steven 给出的解释之后，在模板中调用方法使其多次使用 reduce，因此数据将始终被刷新，但是，通过将其存储在属性中，它将在内存中找到以显示给用户。

谢谢你的光。