Мутация реквизита (в шаблонах django и Vue. js с CDN)

Question

У меня небольшой django проект, а внешний интерфейс кодируется с Vue. js через CDN. Таким образом, у него есть только один сервер для django. И vue помещается в django шаблоны.

DRF является источником веб-API.

Django 2.2.10, DRF 3.11.0 и vue получает последние версии из CDN.

Vuetify (снова из CDN) предоставляет дизайн пользовательского интерфейса материала с v-app-bar, v-navigation-box и v-footer.

Также V-data-таблица Vuetify является используется для двух наборов данных. (страны и их города)

Я могу показать данные, когда страница впервые ответила.

ОДНАКО, когда ящик закрывается нажатием кнопки или когда «строк на странице» в v Таблица данных изменилась, данные исчезли. Я должен обновить sh страницу, чтобы получить ее обратно.

ошибка:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "tableData"

found in

---> <LocCountry>
       <VContent>
         <VApp>
           <Root>

Страница списка:

{% extends 'locations/index.html' %} {% load static%} {% block content %}
<loc-country></loc-country>
{% endblock %}{% block extrascript %}
<script>
  Vue.component("loc-country", {
    props: ["tableData"],
    template: `
      <v-data-table
        :headers="headers"
        :items="tableData"
        class="elevation-1"></v-data-table>
    `,
    data() {
      return {
        // tableData: null,
        loading: true,
        errored: false,
        headers: [
          { text: "Country", value: "name" },
          { text: "ISO-2", value: "iso2" }
        ]
      };
    },
    created() {
      axios
        .get("/api/country/")
        .then(res => (this.tableData = res.data.results))
        .catch(error => {
          console.log(error);
          this.errored = true;
        })
        .finally(() => (this.loading = false));
    }
  });
</script>
{% endblock %}

, и вы можете найти репозиторий проект здесь с данными, включенными при загрузке данных: https://github.com/pydatageek/locations

Answer 1

Быстрое исправление заключается в использовании новой переменной в data с теми же данными из tableData.

Попробуйте так:

Vue.component("loc-country", {
    props: ["tableData"],
    template: `
      <v-data-table
        :headers="headers"
        :items="newTableData"
        class="elevation-1"></v-data-table>
    `,
    data() {
      return {
        newTableData: this.tableData.slice()
      };
    },
    created() {
      axios
        .get("/api/country/")
        .then(res => (this.newTableData = res.data.results))
    }
  });

Это должно работать.

Подробнее об этом вы можете узнать здесь .

Answer 2

Я нигде не мог его найти, но решение этой проблемы было таким простым. Не используйте tableData в качестве реквизита, но поместите его в свойство data и не инициируйте его как null. Это должен быть пустой массив.

Измените страницу списка, как показано ниже:

...
// props: ["tableData"],
....
tableData: []
...

PS: Я не знаю причину! ПОЧЕМУ это так?