Почему может не обновлятся динамически свойство?

Question

[ddddd tttt]

<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>

Почему может не работать toggleRequest, isShow не обновляется при нажатие?

Answer 1

[0xD34F]

Я бы предположил, что свойства isShow изначально отсутствуют в объектах requests - ну, не просто же так вы их выставляете в created. Чтобы они были реактивными, замените

item.isShow = false;

на

this.$set(item, 'isShow', false);

UPD. А-а-а, это у вас не свойство, а параметр. Нет, тогда надо иначе, модифицировать параметры не следует - делайте копию и работайте с ней, вместо возни в created будет как-то так:

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

Comments

[ddddd tttt]

0xD34F , а почему так? И получается если у меня в requests еще 3 массива надо еще 3 таких вложения?

[Алексей Рязанов]

Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр. Другими словами, в простом случае, если поля нет в data-функции компонента, оно не будет реактивным. Подробнее об этом можно узнать здесь.

[ddddd tttt]

solargate ,а можно ли сделать таким образом?

data() {
  return {
    apiCopy: this.api
  };
},

[Алексей Рязанов]

ddddd tttt, да, можно. Ответил в основном треде.

[0xD34F]

ddddd tttt,

а почему так?

Что "так"? Непонятно, к чему относится этот вопрос.

И получается если у меня в requests еще 3 массива надо еще 3 таких вложения?

Если вам для корректной работы надо добавлять содержащимся внутри них объектам какие-то свойства - да, делайте копии. Ну или позволяйте и дальше компоненту мутировать чужие данные, усложняя себе понимание работы кода и рискуя в будущем получить трудноуловимые баги. Дело ваше.

solargate,

Во Vue нельзя динамически добавлять новые корневые реактивные свойства...

Речь не про корневые свойства, а про вложенные. Вы действительно этого не заметили?

да, можно.

Всё-таки не стоит. Будет то же самое, что и до этого - изменение компонентом чужих данных напрямую. Параметр, о котором идёт речь - объект. Этого вы тоже не заметили?

[Алексей Рязанов]

0xD34F,

Речь не про корневые свойства, а про вложенные. Вы действительно этого не заметили

Да и вложенных это тоже касается. Вы меня, возможно неправильно поняли, но этим я хотел сказать, что item.isShow = false; не сработает, потому что Vue так работает.

Всё-таки не стоит. Будет то же самое, что и до этого - изменение компонентом чужих данных напрямую. Это же объект.

Да, не стоит. Не стоит делать многое из того, что есть в примере, но вопрос про реактивность, а чтобы она заработала - можно сделать так. В предоставленной мною ссылке о Вашем замечании тоже сказано.

[ddddd tttt]

solargate, что еще не стоит делать по вашему мнению?

[0xD34F]

ddddd tttt, если вы хотите поговорить solargate, пожалуйста, делайте это в комментариях к его ответу. Не очень интересно получать уведомления о сообщениях, адресованных не мне, уж извините.

Answer 2

[Алексей Рязанов]

Я бы предложил сделать так:

<script>
    export default {
        props: [
            'api'
        ],
        data: function() {
            return {
                localApiData: this.$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 () {
            this.localApiData.forEach((apiItem) => {
                apiItem.requests.forEach((requestItem) => {
                   this.$set(requestItem, 'isShow', false)
                });
            });
        }
    }
</script>

То есть объявить локальные данные, на основе входных. В документации тоже об этом пишут.

Comments

[ddddd tttt]

solargate , что еще не стоит делать по вашему мнению?