مشکل در تغییر 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">×</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 بعد از هر بار حذف کردن اجرا میشه و نشون میده که ویژگی های دسته بندی مربوطه هم حذف میشه
ممنون از راهنماییتون
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
از 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 هم میشه این کارو انجام داد
در جاوا اسکریپت اشیا به صورت reference (ارسال با ارجا) مورد استفاده قرار میگیرند یعنی اگر شما از یک شی استفاده میکنید و اون شی در قسمتی از برنامه دچار تغییراتی بشه این تغییرات در تمامی سطوحی که از این شی استفاده شده اعمال میشه.
برای جلوگیری از اینکار میتونید شی رو کلون کنید و بعد استفاده کنید.
از 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 هم میشه این کارو انجام داد