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({&nbsp; delimiters: ["[[", "]]"],&nbsp; el: ".con",更好的是，通过 ID 而不是像这样的类来寻址 Vue.jsvar app = new Vue({&nbsp; delimiters: ["[[", "]]"],&nbsp; el: "#con",

Answer 2

这似乎解决了它，但也有它自己的问题{% verbatim %} {{index}} {% endverbatim %}让 Django 和 Vue.js 使用 {% verbatim %} 一起工作