@emir_chechen

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

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

При клике на кнопку 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>
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Заменить

:is-open="item.isOpen" на v-model:is-open="item.isOpen"

isOpen = !isOpen на $emit('update:isOpen', !isOpen)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dima9595
@dima9595
Junior PHP
Пропсы являются значениями только для чтения. Запишите пропс в дату и меняйте его
data() {
    return {
      isOpenProps: this.isOpen,
    };
  },
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы