مشکل در تغییر data

- 1 ماه پیش
توسط علی بیات آپدیت شد
Ali Ghaleyan ( 3785 تجربه )
2 ماه پیش

سلام و درود
من template زیر رو دارم
که شخص ابتدا دسته بندی رو انتخاب میکنه و سپس ویژگی های دسته بندی انتخاب شده داخل یک دیتا قرار داده میشه و داخل یک multiselect نمایش میده
حالا بعد از انتخاب هر ویژگی , مشخصاتش بیرون از multiselect نمایش داده میشه و از دیتایی که تمامی ویژگی ها داخلش قرار داره حذف میشه
اما این بین وقتی از دیتای ویژگی ها حذف میشه از دیتای دسته بندی مربوط که درسش قرار دارن هم حذف میشه در حالیکه هیچ نامی ازش برده نشده و نباید حذف بشه

<template>
    <div>
        <div class="form-group">
            <label>دسته بندی مربوط:</label>
            <multiselect v-if="changeCategory == true" v-model="product.categories"
                         :options="categories"
                         ref="multiselectCategories"
                         :searchable="true" :close-on-select="true"
                         :show-labels="false" placeholder="انتخاب ویژگی" label="title"
                         track-by="id" @select="selectedCategory"></multiselect>
            <div v-if="changeCategory == false" class="row">
                <div class="col-sm-10">
                    <input type="text" :value="product.categories.title" class="form-control"
                           disabled>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-primary"
                            @click="returnChangeCategory">
                        تعویض دسته بندی
                    </button>
                </div>
            </div>
        </div>

        <div id="multiselectAttr" ref="multiselectAttr">
            <div class='form-group row' v-for="(attribute,index) in product.attributes"
                 :key="index" :data-index="attribute.id">
                <div class='from-group col-sm-6'>
                    <input class='form-control' :value="attribute.title" type='text' disabled>
                </div>
                <div class='from-group col-sm-6'>
                    <div class="row">
                        <div class="col-sm-11">
                            <input class='form-control' :value="attribute.pivot.value" type='text'>
                        </div>
                        <div class="col-sm-1">
                            <button @click="removeAttr(attribute.id)" type="button" class="close"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" v-if="changeCategory == false">
            <label>ویژگی ها:</label>
            <multiselect :options="all_attributes" v-model="value"
                         @select="attribute_selected"
                         :searchable="true" :close-on-select="true"
                         :show-labels="false" placeholder="انتخاب ویژگی" label="title"
                         track-by="id"></multiselect>
        </div>
    </div>
</template>

و اسکریپت زیر

<script>
    export default {
        name:'test',
        data(){
            return {
                value: [],
                categories: [],
                all_attributes: [],
                changeCategory: false,
                product: {
                    title: '',
                    description: '',
                    count: '',
                    price: '',
                    categories: [],
                },
            }
        },
        methods:{
            selectedCategory(value){
                console.log(value.attributes);
                let array=value.attributes;
                this.all_attributes=[];
                this.all_attributes=array;
                console.log(this.all_attributes);
                this.changeCategory=false;
            },
            attribute_selected(value) {
                this.product.attributes.push(value);
                this.all_attributes.splice(this.all_attributes.indexOf(value), 1);
            },
        //    .......... methods
        },
        watch: {
            'product.categories.attributes'(value) {
                console.log('changed');
            },
        },
    }
</script>

در ویژگی watch تابع product.categories.attributes بعد از هر بار حذف کردن اجرا میشه و نشون میده که ویژگی های دسته بندی مربوطه هم حذف میشه
ممنون از راهنماییتون

بهترین پاسخ انتخاب شده توسط Ali Ghaleyan
علی بیات
2 ماه پیش

از Object.assign برای کلون کردن میتونی استفاده کنی:

function cloneObject(src) {
  return Object.assign({}, src);
}

const source = {a:1, b:2, c:3};
const target = cloneObject(source);
console.log(target); // {a:1, b:2, c:3}

// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1

با iteration هم میشه این کارو انجام داد

mahdi khanzadi ( 13772 تجربه )
2 ماه پیش

در جاوا اسکریپت اشیا به صورت reference (ارسال با ارجا) مورد استفاده قرار میگیرند یعنی اگر شما از یک شی استفاده میکنید و اون شی در قسمتی از برنامه دچار تغییراتی بشه این تغییرات در تمامی سطوحی که از این شی استفاده شده اعمال میشه.
برای جلوگیری از اینکار میتونید شی رو کلون کنید و بعد استفاده کنید.

Ali Ghaleyan ( 3785 تجربه )
2 ماه پیش

@khanzadimahdi
ممنون دوست عزیز... میشه راهنماییم کنید که چطور انجامش بدم

علی بیات ( 106362 تجربه )
2 ماه پیش

از Object.assign برای کلون کردن میتونی استفاده کنی:

function cloneObject(src) {
  return Object.assign({}, src);
}

const source = {a:1, b:2, c:3};
const target = cloneObject(source);
console.log(target); // {a:1, b:2, c:3}

// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1

با iteration هم میشه این کارو انجام داد

برای ارسال پاسخ باید وارد سایت شوید