Vue 3.1.12 - v-модель не работает с динамически сгенерированным выбором ⇐ Javascript

[Anonymous]

У меня есть неопределенное количество выборов. Для каждого выбора мне нужно отслеживать изменение их значений. Итак, я использовал v-модель: < /p>

Код: Выделить всё

[h4]{{ optionName }}[/h4]




{{ value.name }}

На фото показана структура полученных данных.
Вот мой раздел скрипта:

import { getProduct } from "@/services/productService";

export default {
name: "Show",
data() {
return {
product: null, // Інформація про продукт
quantity: 1, // Кількість товару
currentSku: null, // Вибраний SKU
selectedValues: [], // Обрані значення селектів
};
},
async created() {
await this.fetchProduct();
},
methods: {
async fetchProduct() {
try {
const id = this.$route.params.id; // Отримуємо ID з URL
this.product = await getProduct(id);

// Ініціалізація значень для селектів
if (this.product && this.product.values) {
Object.keys(this.product.values).forEach((optionName) => {
const firstValue = this.product.values[optionName][0];
if (firstValue) {
this.selectedValues[optionName] = firstValue.id;
}
});

// Оновлення SKU після ініціалізації
this.updateSku();
}
} catch (error) {
console.error("Failed to load product:", error);
}
},
updateSku() {
if (!this.product || !this.product.skus) return;

// Знаходимо SKU, який відповідає вибраним значенням
const matchingSku = this.product.skus.find((sku) => {
return sku.values.every((value) =>
this.selectedValues[value.option_name] === value.value_id
);
});

// Оновлюємо вибраний SKU
this.currentSku = matchingSku || null;
},
decreaseQuantity() {
if (this.quantity > 1) this.quantity--;
},
increaseQuantity() {
this.quantity++;
},
addToCart() {
if (this.currentSku) {
console.log("Added to cart", this.selectedValues, "Quantity:", this.quantity);
} else {
console.log("Please select valid options first.");
}
},
},
mounted() {
this.$nextTick(() => {
$(document).trigger('change');
});
},
};

< /code>
Я попытался сделать следующее: при изменении значения по крайней мере в одном выборе, привести к изменению значения Currentsku. Тем не менее, я заметил, что значения выбранных вложений не меняются, как и должны. Пожалуйста, помогите мне понять проблему, я впервые пишу на Vue. Спасибо всем

Подробнее здесь: https://stackoverflow.com/questions/793 ... ted-select