Why can't the property be updated dynamically?

Question

Vue.js

<template>
        <div class="list-group">
            <div v-for="baseUrl in api">
                <div class="text-center">
                    <h1>{{baseUrl.name}}</h1>
                    <p>{{baseUrl.url}}</p>
                </div>
                <div v-for="request in baseUrl.requests">
                    <div class="p-1 m-button list-group-item m-1" v-bind:class="listType(request.type)">
                        <button v-on:click="toggleRequest(request)" class="btn py-1 mr-4"
                                v-bind:class="btnType(request.type)">{{request.type.toUpperCase()}}
                        </button>
                        <span class="mr-3">{{request.url}}</span>
                        <span>{{request.name}}</span>
                    </div>
                    <div class="p-1 p-top" v-show="request.isShow">
                        <div :class="borderType(request.type)" class="rounded-top-0 card text-center">
                            <div class="card-header">
                                <ul class="nav nav-tabs card-header-tabs">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#">Общее</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Параметры</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Заголовки</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Ответы</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title">{{request.name}}</h5>
                                <p class="card-text">{{request.description}}</p>
                                <p class="card-text">{{request.change}}</p>
                                <a href="#" :class="btnType(request.type)" class="btn">Просмотрено</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: [
            'api'
        ],
        methods: {
            btnType: function (type) {
                if (type === 'post' || type === 'POST') return 'btn-primary';
                if (type === 'get' || type === 'GET') return 'btn-success';
                if (type === 'put' || type === 'PUT') return 'btn-warning';
                if (type === 'delete' || type === 'DELETE') return 'btn-danger';
            },
            borderType :function(type){
                if (type === 'post' || type === 'POST') return 'border border-primary';
                if (type === 'get' || type === 'GET') return 'border border-success';
                if (type === 'put' || type === 'PUT') return 'border border-warning';
                if (type === 'delete' || type === 'DELETE') return 'border border-danger';
            },
            listType: function (type) {
                if (type === 'post' || type === 'POST') return 'list-group-item-primary';
                if (type === 'get' || type === 'GET') return 'list-group-item-success';
                if (type === 'put' || type === 'PUT') return 'list-group-item-warning';
                if (type === 'delete' || type === 'DELETE') return 'list-group-item-danger';
            },
            toggleRequest(request) {
                request.isShow = !request.isShow;
            }
        },
        created: function () {
            console.log(this.api);
            this.api.forEach((item, i) => {
                item.requests.forEach((item, i) => {
                    item.isShow = false;
                });
            });
        }
    }
</script>

<style scoped>
.m-1.m-button{
    margin-bottom: 0 !important;
}
.p-1.p-top{
    padding-top: 0 !important;
}
.rounded-top-0{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
</style>

Why might toggleRequest not work, isShow not updated on click?

Answer 1

I would guess that isShow properties are not natively present on requests objects - well, that's not just how you set them in created . To make them reactive, replace with UPD. Ahh, this is not a property, but a parameter. No, then it’s necessary differently, you shouldn’t modify the parameters - make a copy and work with it, instead of fussing in created it will be something like this:

data() {
  return {
    apiCopy: this.api.map(n => ({
      ...n,
      requests: n.requests.map(m => ({
        ...m,
        isShow: false,
      })),
    })),
  };
},