Как работать во Vue в computed со сеттерами?

Question

[alaskafx]

Сразу скажу: читал документацию, но я не понял до конца..

Значит..
Представим, что у меня есть компьютед:

selectedCarNumber: {
            get: function () {
                return 0
            },
            set: function (value) {
                // что писать, чтобы поменять значение у возвращаемого числа get ?
            }
        },

Как по идее должен работать сетттер?
Что-то вроде: а если я хочу поменять значение возвращаемого числа у get - как быть ?

Пожалуйста, объясните

Answer 1

[Алексей Ярков]

data() {
  return {
    number: 0
  };
},
selectedCarNumber: {
            get: function () {
                return this.number;
            },
            set: function (value) {
                this.number = value;
            }
        },

Answer 2

[0xD34F]

Сеттер должен изменить данные, которые используются в геттере.

Давайте рассмотрим на конкретном примере. Пусть есть массив объектов, на основе которых создаются чекбоксы:

data: () => ({
  items: [
    { checked: false, label: '...' },
    { checked: false, label: '...' },
    ...
  ],
}),

<label v-for="n in items">
  <input type="checkbox" v-model="n.checked">
  {{ n.label }}
</label>

И мы хотим сделать чекбокс, который позволял бы устанавливать или снимать все чекбоксы сразу. Его состояние будет описываться вычисляемым свойством. Геттер - очевидно, будет содержать проверку, что все чекбоксы установлены. А сеттер будет устанавливать переданное ему значение всем чекбоксам. Как-то так:

computed: {
  get() {
    return this.items.every(n => n.checked);
  },
  set(val) {
    this.items.forEach(n => n.checked = val);
  },
},

<label>
  <input type="checkbox" v-model="all">
  ALL
</label>

https://jsfiddle.net/j7hr68t4/

Comments

[alaskafx]

А вот у Вас есть сеттер

set(val) {
    this.items.forEach(n => n.checked = val);
  },

- как он будет работать, если мы не пишем так:

this.items = this.items.forEach(n => n.checked = val);

?

[alaskafx]

Если представить, что у нас такая конструкция:

strapCopy: {
            get: function () {
                return this.strapon
            },
            set: function (value) {
                this.strapon.filter(el => el.age > value);
            }
        }

То код, находящийся в сеттере не работает, но будучи у Вас в примере - используется примерно такая же логика(верно?), но рабочая

[alaskafx]

Ах точно, прошу прощения, не догнал.
Это же forEach

[Aetae]

alaskafx, у нас тут не React, иммутабелность не нужна. Не надо менять в весь массив items чтоб он отреагировал, достаточно поменять именно то, что нужно - значения checked.)

А вот если используешь filter - т.е. таки изменяешь сам отдаваемый массив, то тут уж надо результат чему-то присваивать.
Однако в примере у тебя чушь написана.
get - получение, set - установка.

a = this.value // value get
this.value = a; // value set(a)

Т.е. то что ты получаешь и отдаёшь должно иметь примерно один тип.

Тот фильтр который ты хочешь сделать, делается без всяких set:

strapCopy() {
  return this.strapon.filter(el => el.age > this.straponFilter);
}

Ты меняешь(не важно как и где) значение straponFilter, и strapCopy само вычисляется заново.