Vue.js 中未打印索引金额

Question

很抱歉，我无法提供太多信息，因为我真的不知道为什么这不起作用，我正在尝试打印索引，但由于某种原因索引根本不起作用，感谢任何帮助。索引在任何时候都没有任何值，永远不会打印任何值。HTML页面{% extends 'blog/base.html' %}{% block content %}{% load static %}<form  method="post"> {% csrf_token %}    <div class="con">      <button type="button" name="button" @click='addHead()'>          header      </button>      <button type="button" name="button" @click='addPara()'>          Para      </button>        <div id="body-fields">          <div class="car-body" v-for="(post, index) in posts">            <div name='count'>              {{index}}            </div>            <input type="textbox" v-bind:name='[post.type]' v-model='post.content'>            <span style="float:right;background-color:green" @click='removeForm(index)'>                x            </span>          </div>        </div>        <input type="submit" vaule="save"/>      </div></form>      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script src="{% static 'blog/JS/main.js'%}" type="text/javascript"></script>  {% endblock content %}Vue.js 页面var app= new Vue({  el: '.con',    data:{      posts: [      {        content:'',        type:'title'      }    ],    },    methods:{      addHead(index){        this.posts.push({          content:'',          type:'header',        })      },      addPara(index){        this.posts.push({          content:'',          type:'para',        })      },      removeForm(){        this.posts.splice(index, 1)      }    }})

Answer 1

如果您将分隔符（请更新您的代码以显示这一点）更改为“[[”和“]]”，那么在使用时它将显示索引

[[index]]

要更改分隔符，请使用以下命令：

var app = new Vue({

  delimiters: ["[[", "]]"],

  el: ".con",

更好的是，通过 ID 而不是像这样的类来寻址 Vue.js

var app = new Vue({

  delimiters: ["[[", "]]"],

  el: "#con",

Answer 2

这似乎解决了它，但也有它自己的问题

{% verbatim %}
{{index}}
{% endverbatim %}

让 Django 和 Vue.js 使用 {% verbatim %} 一起工作