如何在Django模板中实现vue.js搜索过滤器

Question

在这里，我正在django应用程序模板中实现vue.js的搜索过滤器。我尝试了以下代码，但无法正常工作。我该怎么办？

  

vue.js

new Vue ({
      el: '#app',
      delimiters: ['[[', ']]'],
      data: {
        search: '',
        List : [
        {% for item in items %}
          {
            "id" : "{{ item.id }}",
           "name":  " {{ item.name }} "
          },

        {% endfor %} 
    ]
      },
      computed: {
        filteredProducts() {
          // var lowerTitle = product.title.toLowerCase();
          return this.List.filter((list) => {
            return list.name.toLowerCase().match(this.search);
          });
        }
      }
    })

  

模板

<div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Search title.."/>

      </div>
      <div class="wrapper">
        <div class="card" v-for="item in filteredList" :key="list.id">

            [[ item.name ]]


          </a>
        </div>
      </div>
    </div>