Can someone help me with integrating this code into my project? Here is the code I am referencing: http://jsfiddle.net/dkmmhf5y/701/
This snippet shows my JavaScript file, please disregard the 'test' data
var app = new Vue
(
{
el: '#main',
data: function ()
{
return {
search: '',
customers: [
{
id: 1,
org: 'OOC',
vendor: '1',
},
{
id: 2,
org: 'Golf 123Test',
vendor: '@aboutTest',
},
{
id: 3,
org: 'AdvanceWaTest',
vendor: '@actuTest',
},
{
id: 4,
org: 'Test4',
vendor: 'Test3345',
}
]
};
},
computed:
{
filteredCustomers: function ()
{
var self = this;
return this.customers.filter(function (cust)
{
return
cust.vendor.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
});
}
}
}
);
Below is a section of my HTML code from within the body of an HTML file. I have removed most of the unnecessary elements to focus on what's important:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="langleylogo.png">
<link href='style.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Langley</title>
</head>
<body>
<div id="main">
<div class="parent">
<div class="left">
<div class="blueTop">
<input type="text" v-model="search" class="orgSearch" placeholder="Client | ToDo | Ticket">
</div>
<div class="leftMiniContainer">
<template v-for="customer in filteredCustomers">
<div class="clientSearchCard">
<div class="orgVendor">V:</div>
<div class="clientSearchCardValue">{{ customer.vendor }}</div>
<br>
<div class="orgVendor">O:</div>
<div class="clientSearchCardValue">{{ customer.org }}</div>
</div>
</template>
</div>
</div>
<div class="right ">
<div class="right-nav ">
<a href="index.html " class="selected ">
<i class="header-glyph fa fa-home " aria-hidden="true "></i> Overview
</a>
<a href="status.html ">
<i class="header-glyph fa fa-check-square-o " aria-hidden="true "></i> Status
</a>
<a href="client.html ">
<i class="header-glyph fa fa-address-card " aria-hidden="true "></i> Client
</a>
<a href="ticket.html ">
<i class="header-glyph fa fa-ticket " aria-hidden="true "></i> Ticket
</a>
<a href="todo.html ">
<i class="header-glyph fa fa-list " aria-hidden="true "></i> To Do
</a>
<a href="files.html ">
<i class="header-glyph fa fa-file-image-o " aria-hidden="true "></i> Files
</a>
<a href="features.html ">
<i class="header-glyph fa fa-wrench " aria-hidden="true "></i> Features
</a>
<div class="right-nav-config ">
<a href="config.html ">
<i class="fa fa-user-circle " aria-hidden="true "></i>
</a>
</div>
</div>
<div class="clientListWrapper ">
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1066657550223e253e2127">[email protected]</a>/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
I initially had success displaying the entire array of object data, but now I'm struggling to only show the data entered into the text box.