时间戳

首页 > 解决方案 > Vue + Flask：简单的杂货清单示例不起作用

javascript - Vue + Flask：简单的杂货清单示例不起作用

问题描述

我正在 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. [[待办事项文本]]
  2. [[待办事项文本]]
  3. [[待办事项文本]]

我delimiters: ['[[', ']]'],用来区分 VUE 的变量和 Jinja2 的变量。

我尝试替换： template: '<li>[[ todo.text ]]</li>' by template: '<li>{{ todo.text }}</li>'，但这会导致 Jinja2 抛出错误。

有任何想法吗？

提前致谢。

标签： javascriptvue.jsjinja2

解决方案

我认为您应该在子组件中设置分隔符。

推荐阅读