Как в vue использовать результаты с computed в data?

Question

[r_g_b_a]

Здравствуйте. У меня есть такой упрощенный пример: https://jsfiddle.net/8d6khn0L/
В функции calc рассчитывается площадь и периметр в зависимости от введенных пользователем данных. Мне нужно эти значения использовать для расчета наценки при выборе опций. Например, при выборе первого чекбокса - перемножить его значение price с рассчитанным area и вывести в {{option.margin}} . Как это сделать?

Answer 1

[0xD34F]

Добавьте в option'ы свойство, которое будет указывать, на что надо умножать price:

options: [
  {
    ...
    propToBeMultipliedByPrice: 'area',
  },
  {
    ...
    propToBeMultipliedByPrice: 'perimeter',
  },
],

И умножайте:

{{ option.price * calc[option.propToBeMultipliedByPrice] }}

Comments

[Владимир Коротенко]

Как по мне смешивать код и разметку, идея не очень. Лучше метод создать.

[0xD34F]

Владимир Коротенко, надо будет автору вопроса - создаст.

[Владимир Коротенко]

0xD34F,
в порядке занудства
https://ru.vuejs.org/v2/style-guide/#%D0%9F%D1%80%...

[0xD34F]

Владимир Коротенко, правда думаете, что я этого не видел?

[Владимир Коротенко]

0xD34F, Скорее всего видели, PHP стайл нервирует, даже в примерах.
Впрочем если нормально среда настроена, в этом месте будет куча ругани.

Answer 2

[Владимир Коротенко]

То что в {{}} это ява скрипт так что можете писать любое выражение.
Хотя лучше добавить 2 метод calculateMargin и вызывать его вместо даты

Comments

[r_g_b_a]

Владимир, подскажите, как это правильно сделать? Я использовал вариант, предложенный 0xD34F, и следуя вашему совету создал метод calculateMargin, но что-то делаю не так - в этом месте результат функции calc не доступен https://jsfiddle.net/2v1a9c7j/

[Владимир Коротенко]

r_g_b_a,
Все методы вызывайте через this, тоже относиться и к data, только дата опускается
return option.price * this.calc[option.multiplier]