首页 > 解决方案 > Vue 未定义

问题描述

我一直在努力解决这个错误一段时间。我尝试了多种方法,但都没有奏效。我要做的就是让这个简单的组件正常工作。请有人帮忙。:)

<script>
const app = new Vue({
  el: "#main",
  data: function(){
          return {
          search: '',
          customers: [
            { id: '1', name: 'Something', },
            { id: '2', name: 'Something else', },
            { id: '3', name: 'Something random', },
            { id: '4', name: 'Something crazy', }
          ]};
  },
  computed:
  {
      filteredCustomers:function()
      {
         var self=this;
         return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
         //return this.customers;
      }
  }
  });
</script>
<template>
<div id="main">
Search: <input type="text" v-model="search"/>   
<div v-bind:v-for="customer in filteredCustomers">
 <span>{{customer.name}}</span>
</div>
</div>
</template>

标签: javascripthtmlcssvue.js

解决方案


您应该包含 Vue 库。
这样做的一种方法是<script>按照 Vue文档中的描述使用。


推荐阅读