Как переписать Boolean значение в props?

Question

[Эмир Товстултанов]

Привет всем! Помогите чайнику))

При клике на кнопку BUTTON должна открываться блок с классом "lorem"
Но вместо этого мне в консоль приходит ошибка

TypeError: 'set' on proxy: trap returned falsish for property 'isOpen'
at Object.onClick._cache.._cache.

И 2 WARNING

Attempting to mutate prop "isOpen". Props are readonly.

Unhandled error during execution of native event handler
at
at

Мой код в App.vue

<template>
  <div class="container pt-1">
    <div class="card">
      <h2>Актуальные новости {{ now }}</h2>
    </div>
    <app-news
      v-for="item in news"
      :key="item.id"
      :title="item.title"
      :id="item.id"
      :is-open="item.isOpen"
    ></app-news>
  </div>
</template>

<script>
import AppNews from "./AppNews";
export default {
  data() {
    return {
      now: new Date().toLocaleDateString(),
      news: [
        {
          title: "Джо Байден победил на выборах США",
          id: 1,
          isOpen: false,
        },
        {
          title: "Vue  3 успешно работает",
          id: 2,
          isOpen: false,
        },
      ],
    };
  },
  components: {
    "app-news": AppNews,
  },
};
</script>

Мой код в AppNews.vue

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <button class="btn" @click="isOpen = !isOpen">Открыть</button>
    <p v-if="isOpen" class="lorem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. A quos et quaerat
      deserunt similique omnis. Quae fugit aperiam, labore sed cumque tenetur
      nihil harum facere amet earum non sunt delectus.
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    id: {
      type: Number,
      required: true,
    },
    isOpen: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      // isOpen: false,
    };
  },
};
</script>

Answer 1

[0xD34F]

В родительском компоненте выполняйте привязку параметра isOpen с помощью директивы v-model, замените :is-open="item.isOpen" на v-model:is-open="item.isOpen".

Соответственно, в дочернем компоненте вместо прямого изменения значения параметра отправляйте новое значение родителю, замените isOpen = !isOpen на $emit('update:isOpen', !isOpen).

Answer 2

[Дмитрий Кузнецов]

Пропсы являются значениями только для чтения. Запишите пропс в дату и меняйте его

data() {
    return {
      isOpenProps: this.isOpen,
    };
  },

Comments

[Эмир Товстултанов]

Дело в том что я прохожу курсы по VUE 3... Ну с инета скачал)) у него как не странно все работает, а у меня нет(

И у него точно так же написано