Блог

Главная - Вопросы по программированию - Vue Flask: простой пример списка продуктов не работает

Vue Flask: простой пример списка продуктов не работает

#javascript #vue.js #jinja2

#javascript #vue.js #jinja2

Вопрос:

Я делаю этот пример из VUE.js веб-сайт для получения списка продуктов. Хотя я получаю некоторое поведение от компонентов, оно работает не полностью, и я исчерпал все свои возможности, чтобы попытаться его отладить, поэтому я прибегаю к вашей бесконечной мудрости:

Вот что у меня есть:

HTML:

 {% extends "layout.html" %}
{% block content %}

<div id="app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

{% endblock %}

VUE:

 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>[[ todo.text ]]</li>'
})

var app= new Vue({
  el: '#app',
  delimiters:     ['[[', ']]'],
  data: {
    groceryList: [
      { id: 1, text: 'Vegetables' },
      { id: 2, text: 'Cheese' },
      { id: 3, text: 'Bread' }
    ]
  }
})

Ожидаемый результат:

  1. Овощи
  2. Сыр
  3. Хлеб

Мой результат:

  1. [[ todo.text ]]
  2. [[ todo.text ]]
  3. [[ todo.text ]]

Я использую delimiters: ['[[', ']]'], , чтобы отличать переменные VUE от переменных Jinja2.

Я попытался заменить: template: '<li>[[ todo.text ]]</li>' by template: '<li>{{ todo.text }}</li>' , но это приводит к тому, что Jinja2 выдает ошибку.

Есть идеи?

Заранее спасибо.

Комментарии:

1. Ограничения: эта опция доступна только в полной сборке с компиляцией в браузере. Так что это зависит от того, какой пакет Vue вы загружаете. vuejs.org/v2/api/#delimiters

Ответ №1:

Я думаю, вам следует установить delimeter в дочернем компоненте.