How to get rid of Unexpected mutation of prop error?

Question

Vue.js

Hello. Tell me plz. I study props in vue, like I do everything according to the lesson. But the linter throws an unexpected mutation error. I would appreciate help in clarifying.

<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 {
  name: 'App',
  data () {
    return {
      now: new Date().toLocaleDateString(),
      news: [
        {
          title: 'Новость 1',
          id: 1,
          isOpen: false
        },
        {
          title: 'Новость 2',
          id: 2,
          isOpen: false
        }
      ]
    }
  },
  components: { AppNews }
}
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <button class="btn" @click="isOpen = !isOpen">Открыть</button>
    <p v-if="isOpen">Lorem ipsum dolor sit amet.</p>
  </div>
</template>

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

Answer 1

Use $emit to change the isOpen property, properties cannot be changed directly inside the component, there are custom events for that. Actually, it's written in the docs.