CODEWITHSUNDEEP
javascripthtmlcssvue.js
John Pena
John Pena

Reputation: 35

Vue not Defined

I have been struggling this error for a while now. I've tried multiple ways and none of them work. All I am trying to do is to get this simple component working. Someone help please. :)

<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>

Upvotes: 0

Views: 56

Answers (1)

Arik
Arik

Reputation: 6501

You should include the Vue library.
One way of doing so is including using <script> as described in Vue's documentation.

Upvotes: 2

Related Questions