Vue js сравнить 2 объекта и удалить различия в наблюдателе

Question

Мои данные:

data() {
  return {
    currentStore: this.store,
    brands: [],
  }
},

Мой v-select

<v-select
    v-model="currentStore.brands.data"
    :options="allBrands"
    :taggable="true"
    :multiple="true"
/>

У меня есть наблюдатель на объекте, который выглядит так (this.newVal):

brands:Object
 data:Array[1]
  0:Object
    name:"3T"
 data:Array[1]
  0:Object
    name:"abc"

Я хочу сравнить этот объект с этим (this.allBrands)

allBrands:Array[254]
  0:Object
    name:"3T"
  1:Object
    name:"Achielle"

Как видите, я хочу, чтобы имя «ab c» не было во втором объекте, который я хочу чтобы удалить его из наблюдателя, вот что у меня:

Object.keys(newVal).forEach(function(key) {
    console.log(Object.values(this.allBrands).includes(newVal[key].name));
});


watch: {
  "store.brands.data": function (newVal, oldVal) {
    console.log(this.allBrands);
    console.log(newVal);

    Object.keys(newVal).forEach(function(key) {
      console.log(Object.values(this.allBrands).includes(newVal[key].name));
    });
  }
},

Я получаю следующую ошибку:

«TypeError: невозможно прочитать свойство allBrands из undefined»

Моя цель состоит в том, чтобы иметь в моем store.brands.data только:

brands:Object
 data:Array[1]
  0:Object
    name:"3T"

, так как это единственный, который есть в this.allBrands

EDIT

Object.keys(newVal).forEach((key) => {
    if (!Object.values(this.allBrands).includes(newVal[key].name)) {
        newVal.pop();
    }
});

Это вызывает следующую ошибку, которую я не понимаю:

Ошибка обратного вызова для наблюдателя «store.brands.data»: «TypeError: не удается прочитать свойство 'name' из undefined "

Answer 1

Согласно упомянутой вами ошибке, похоже, что this получает undefined, и ваш метод не может найти vue instance

Проблема связана с привязкой this к вашему function . Вам нужно использовать arrow fn для лексической привязки this.

watch: {
  "store.brands.data": function (newVal, oldVal) {
    console.log(this.allBrands);
    console.log(newVal);

Чтобы обновить или удалить свойство из объекта vue, я рекомендую вам использовать delete ref: https://vuejs.org/v2/api/#Vue -удаление

    Object.keys(newVal).forEach((key) => {
      console.log(Object.values(this.allBrands).includes(newVal[key].name));
    });
  }
},

Answer 2

Как написал @Satyam Pathak, причиной первой ошибки была проблема привязки, которую можно решить многими способами, но наиболее современным решением является использование функции стрелки.

// Use of an arrow function

watch: {
  "store.brands.data": (newVal, oldVal) => { // use arrow functions in both places for consistency. 
    console.log(this.allBrands);
    console.log(newVal);

    Object.keys(newVal).forEach((key) => { // use an arrow function to bind the context to the parent context
      console.log(Object.values(this.allBrands).includes(newVal[key].name));
    });
  }
},


// Use of a constant to capture the context of the parent

watch: {
  "store.brands.data": function (newVal, oldVal) {
    const self = this;

    Object.keys(newVal).forEach(function(key) {
      console.log(Object.values(self.allBrands).includes(newVal[key].name));
    });
  }
},

// Bind the function to return a function that is bound to the parent context
watch: {
  "store.brands.data": function (newVal, oldVal) {
    Object.keys(newVal).forEach(function(key) {
      console.log(Object.values(this.allBrands).includes(newVal[key].name));
    }.bind(this));
  }
},

Что касается второго вопроса, если newVal находится в этой форме ниже

brands:Object
 data:Array[1]
  0:Object
    name:"3T"
 data:Array[1]
  0:Object
    name:"abc"

причина, по которой вы получаете ошибку "TypeError: Cannot read property 'name' of undefined", заключается в том, что

Object.keys(newVal) returns "data" и newValue.data возвращает массив с объектом a.

Следовательно, newVal.data.name вернет ошибку. Возможным вариантом будет l oop через каждый массив, но это не идеальный подход.

Я придумал много способов решения этой проблемы, но они включают несколько циклов for, которые были бы неэффективными и, откровенно говоря, не стоит даже поделиться. Это ужасная практика кодирования.

Вам следует подумать об упрощении структуры данных newVal. Например, newVal является объектом массивов. Можно ли упростить его до массива объектов?