Добрый день, коллеги!
Мне нужна ваша помощь в решении одной проблемы.
В компоненте Vue в методах я получаю данные следующим образом:
<pre><code class="javascript">methods: {
getTextiles() {
axios.get('https://site.ru/api/textile')
.then(res => {
this.textiles = res.data;
});
},
}</code></pre>
Затем я вывожу эти данные в элемент select:
<pre><code class="javascript"><select v-model="select">
<option v-for="item in textiles"
:value="item.price"
:class="{ red:item.quantity===2, green:item.quantity===1}"
:data-width="item.width"
>{{item.title}}</option>
</select></code></pre>
Теперь моя задача заключается в том, чтобы передать значение атрибута data-width выбранного option в формулу для computed свойства textileSumm:
<pre><code class="javascript">computed: {
textileSumm() {
return ((parseInt(this.width) * parseInt(this.height)) * 1.6 / parseInt(this.select.item.width));
},
},</code></pre>
Я успешно передаю значения полей height и width, однако значение из атрибута data-width из select не удается получить. К тому же, я не могу использовать value для передачи этих данных, поскольку там отображается цена.
Пожалуйста, помогите мне решить эту задачу!
Вам действительно нужно немного изменить подход, чтобы передать значение атрибута `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` в ваших вычислениях. Убедитесь, что при выборе элемента всё корректно работает, и вы можете успешно использовать нужные значения в ваших вычислениях.
Нужно забыть jquery-подход: выкинуть дата-атрибут, в качестве value использовать весь объект item и его свойства будут доступны в this.select, см. документацию: <a href="https://vuejs.org/guide/essentials/forms.html#select-options" rel="nofollow">https://vuejs.org/guide/essentials/forms.html#sele...</a> <br/> <br/> Отдельно непонятно, зачем там parseInt.