Wątek przeniesiony 2023-04-11 17:50 z JavaScript przez Riddle.

Błąd: Zmiana właściwości computed z v-model

0

na wstepie pobieram zamowienie w onMounted. Dalej musze ustawic orderStatus aby switch byl w odpowiedniej pozycji ( switch wymaga bool a ja status mam w postaci number, bo istnieja inne statusy jeszcze niewidoczne na UI )

<el-switch
  v-model="orderStatus"
  @change="changeStatus"
/>
const order = ref<IOrder>({} as IOrder);
const getOrderStatus = computed(() => {
      return order.value.Status == 1 ? true : false;
    });
const orderStatus = ref(getOrderStatus); // tutaj kombinuje aby to co pobralem z backendu ustawic jak inicjalne true/false

onMounted(() => {
  Promise.all([
    getOrder(route.params.id as string), // to zwraca mi order
  ]);
});

const changeStatus = (value) => {
  order.value.Status = value ? OrderStatus.CONFIRMED : OrderStatus.OPEN; // true/false ? 1 : 0
};

Inicjalnie switch ustawia sie OK. Podczas uzywania changeStatus otrzymuje "Write operation failed: computed value is readonly"
poza tym ostrzezeniem w konsoli wszystko przypisuje/zmienia sie ok i dziala
Komunikat jasny, nie wiem gdzie probuje zmienic getOrderStatus, nie mam pomyslu jak zniwelowac warning.

0
john_doe napisał(a):

Komunikat jasny, nie wiem gdzie probuje zmienic getOrderStatus, nie mam pomyslu jak zniwelowac warning.

Domyślam się, że v-model modyfikuje Ci wartość z computed

john_doe napisał(a):
const getOrderStatus = computed(() => {
      return order.value.Status == 1 ? true : false;
    });
const orderStatus = ref(getOrderStatus); // tutaj kombinuje aby to co pobralem z backendu ustawic jak inicjalne true/false

Spróbuj zamienić powyższy kod czymś takim

const orderStatus = computed({
  get() {
    return order.value.Status == 1;
  },
  set(newValue) {
    order.value.Status = newValue;
  }
});

https://vuejs.org/guide/essentials/computed.html#writable-computed

Wtedy musisz zamienić wszystkie wystąpienia getOrderStatus na orderStatus.

1 użytkowników online, w tym zalogowanych: 0, gości: 1