Вам действительно нужно немного изменить подход, чтобы передать значение атрибута `data-width` выбранного элемента `option` в ваш `computed` свойство. Поскольку вы используете `v-model` для привязки выбора, вам стоит использовать объект для хранения связанных данных.
Вот пример, как вы можете реализовать это:
1. Вместо того чтобы использовать только одно значение для `value`, вы можете создать объект, который будет содержать нужные вам данные, включая `width` и `price`.
2. Измените ваш `select` так, чтобы `value` включал все необходимые атрибуты.
Вот как это может выглядеть:
### Шаг 1: Обновите ваш элемент `select`
```html
<select v-model="selectedTextile">
<option v-for="item in textiles"
:key="item.id"
:value="{ price: item.price, width: item.width }"
:class="{ red: item.quantity === 2, green: item.quantity === 1}">
{{ item.title }}
</option>
</select>
```
### Шаг 2: Обновите `data` и `computed` в вашем компоненте
В вашем `data` добавьте переменную для хранения выбранного текстиля:
```javascript
data() {
return {
textiles: [],
selectedTextile: null, // Будет хранить выбранное значение
height: 0,
width: 0,
};
}
```
Теперь вы можете обновить ваше `computed` свойство для использования новых данных:
```javascript
computed: {
textileSumm() {
if (this.selectedTextile) {
const textileWidth = parseInt(this.selectedTextile.width);
return ((parseInt(this.width) * parseInt(this.height)) * 1.6 / textileWidth);
}
return 0; // В случае если ничего не выбрано, возвращаем 0 или другое значение по умолчанию
},
},
```
### Резюме
Таким образом, вы создаете объект для передачи в `v-model`, который содержит как цену, так и ширину. Теперь вы можете использовать `this.selectedTextile.width` в ваших вычислениях. Убедитесь, что при выборе элемента всё корректно работает, и вы можете успешно использовать нужные значения в ваших вычислениях.