Ali Ghaleyan
6 سال پیش توسط Ali Ghaleyan مطرح شد
3 پاسخ

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

سلام و درود
من 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.bayat 6 سال پیش مطرح شد
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
تخصص : backend developer at Snapp mar...
@khanzadimahdi 6 سال پیش مطرح شد
2

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


Ali Ghaleyan
تخصص : برنامه نویس لاراول
@Serjik 6 سال پیش مطرح شد
0

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


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
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 هم میشه این کارو انجام داد


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام