Сращивание с вычисляемым элементом, отображающим элементы

#javascript #vue.js #vuejs3

Вопрос:

Я хотел бы убедиться, что все объекты в массиве имеют тип Item . Если я это сделаю, a splice больше не будет работать позже.

Вот как я это делаю:

 computedItems: {
    get()
    {
        //return this.modelValue;
        return this.modelValue?.map((item) => new Item(item));
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}
 

Это работает нормально, но, похоже, нарушает реактивность, так как:

 removeItem(item) {
    let key = this.computedItems.findIndex((i) => {
        return item === i;
    });

    this.computedItems.splice(key, 1);
}
 

не работает (ошибки нет, список просто не обновляется).

Если я это сделаю

 computedItems: {
    get()
    {
        return this.modelValue;
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}
 

соединение работает должным образом (но элементы не сопоставлены с конкретным объектом).

Мои вопросы:

  1. Как я могу это решить?
  2. Почему это так? Это плохая идея-сопоставлять внутри вычисляемого сеттера?

Ответ №1:

Я не уверен, почему это происходит, и не могу объяснить это очень хорошо.

Массив и объект хранятся в памяти. Так что это указатель на воспоминания. Указатель не менялся, и ничто не реагирует. (Головная боль)

Можете ли вы попробовать этот код:

 removeItem(item) {

    const newArray = [...this.computedItems];
    let key = newArray.findIndex(i => item === i);

    newArray.splice(key, 1);

    this.computedItems = newArray;
}