Блог

В качестве теста на использование Vue для получения URL-адреса API Django Rest Framework, похоже, он работает нормально, и я получу список названия руководства и отображение идентификатора руководства в моих ссылках, как и ожидалось:

Мой HTML-файл:

 <li v-for="tutorial in tutorials">
    <a href="/tutorial/[[ tutorial.id ]]/">
        [[ tutorial.title | title ]]
    </a>
    at [[ tutorial.created ]] by [[ tutorial.author ]]
</li>

<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        delimiters: ["[[", "]]"],
        data: {
            tutorials: {}
        },
        mounted() {
          axios.get('/api/tutorials/').then(response => {
            this.tutorials = response.data
          })
        }
    });
</script>
  

Что касается rest api для Django, сериализатор, используемый в Django, является:

 class TutorialSerializer(serializers.HyperlinkedModelSerializer):
author = serializers.StringRelatedField()
class Meta:
    model = Tutorial
    fields = [
        "title",
        "description",
        "summary",
        "author",
        "graphic",
        "created",
        "modified",
        "is_approved",
        "is_published",
        "publish_date",
    ]
  

Но когда я ввожу ограничение, подобное этому, в settings.py:

 REST_FRAMEWORK = {
    ...
    'DEFAULT_PAGINATION_CLASS': 
        'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 100,
}
  

Теперь я получаю это в консоли:

 TypeError: Cannot read property 'title' of null
at eval (eval at Ya (vue:6), <anonymous>:3:331)
at wn.vt [as _l] (vue:6)
at wn.eval (eval at Ya (vue:6), <anonymous>:3:177)
at wn.e._render (vue:6)
at wn.r (vue:6)
at fn.get (vue:6)
at fn.run (vue:6)
at un (vue:6)
at Array.<anonymous> (vue:6)
at qe (vue:6)
  

Кстати, использование администратора Django для просмотра Rest API работает нормально. Кто-нибудь когда-либо видел это раньше?

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

Мне нужно было использовать:

 axios.get('/api/tutorials/').then(response => {
        this.tutorials = response.data.results
      })
  

Откуда я знал? Потому что я использовал curl (как и должен был изначально) и нашел фактические возвращаемые значения, когда добавил этот фильтр разбивки на страницы. :- В любом случае, я хочу сохранить это здесь на случай, если кто-то облажался, как я, и не исследовал должным образом. Я делаю это годами, и я все еще допускаю подобные ошибки. 🙂