Vue: реквизиты не назначаются автоматически; при назначении вручную - Избегайте изменения свойства напрямую - ошибка - PullRequest
Новая
       31

Vue: реквизиты не назначаются автоматически; при назначении вручную - Избегайте изменения свойства напрямую - ошибка

2 голосов
/ 29 мая 2020

У меня есть два компонента vue: GetAnimal.vue и DisplayAnimal.vue. GetAnimal.vue отправьте JSON с данными животных на DisplayAnimal.vue, используя маршрутизатор pu sh. DisplayAnimal.vue отображает эти данные. Это работает так: я go до /getanimal, нажимаю кнопку, которая запускает функцию getAnimal(), которая приводит меня к /viewanimal (через маршрутизатор pu sh):

GetAnimal. vue: 

<script>
    import axios from 'axios';

    export default {
        data: function () {
            return {
                name: 'defaultAnimal',
                defaultanimal: {
                    name: 'Cat',
                    furColor: 'red',
                    population: '10000',
                    isExtinct: false,
                    isDomesticated: true
                },
                animal: String
            }
        },
        methods: {
            getAnimal: function () {
                console.log("this.defaultanimal: " +
                    JSON.stringify(this.defaultanimal));

                this.$router.push({
                     name: "viewanimal",
                    params: {
                         animal: this.defaultanimal
                     }
                 });

            },
...

DisplayAnimal. vue: 

<template>
    <div>
        <h1>Displaying animal:</h1>
        <p>Animal name: {{animal.name}}}</p>
        <p>Fur color: {{animal.furColor}}</p>
        <p>Population: {{animal.population}}</p>
        <p>Is extinct: {{animal.isExtinct}}</p>
        <p>Is domesticated: {{animal.isDomesticated}}</p>

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        props:  {
            animal:  {
                name: {
                    type: String
                },
                furColor:  {
                    type: String
                },
                population: String,
                isExtinct: String,
                isDomesticated: String
            }
        },

        name: "DisplayAnimal",

        methods: {

        },
        created() {
            console.log("animal param: " +
                JSON.stringify(this.$route.params.animal));
            this.animal = this.$route.params.animal;
        }
    };
</script>

Животное отображается нормально:

enter image description here

Однако я получаю предупреждение в консоли:

enter image description here

The this.animal = this.$route.params.animal; строка, которая явно назначает реквизиты, вероятно, является причиной предупреждения.

Однако, если я удалю эту строку, животное не будет отображаться вообще:

enter image description here

У меня есть этот

маршрутизатор. js: 

{
    path: "/viewanimal",
    name: "viewanimal",
    component: () => import('./views/DisplayAnimal.vue'),
    props: {animal: true}
},
{
    path: "/getanimal",
    name: "getanimal",
    component: () => import('./views/GetAnimal.vue')
}

Я думал, что настройка props: {animal: true} обеспечит автоматическое назначение, но похоже, что это не так. Как исправить?

1 Ответ

2 голосов
/ 29 мая 2020

Хорошо обновляемая опора напрямую является антипаттерном

Также не имеет смысла иметь animal prop в DisplayAnimal компоненте, если вы знаете, что это не часть родительского компонента, который проходит данные к нему. animal должно быть внутри data, чтобы вы могли обновить его в created обратном вызове.

Пример 

data() {
  return {
    loading: true, // perhaps you'd like to show loader before data gets fetched
    animal: {
        id: -1,
        name: '',
        furColor: '',
        population: 0,
        isExtinct: false,
        isDomesticated: false
    }
  }
},
created() {
  this.animal = this.$route.params.animal;
  this.loading = false;
}
...