We Keep Coding

Vue.js 3 and search

I have a data coming from API. It is an array of "houses".
Code looks like this:
<template>
<div class="search__sort">
<input v-model="search" placeholder="Search for a house">
<button class="sort__button">Price</button>
<button class="sort__button">Size</button>
</div>
<div v-for="house in houses" :key="house.id" class="house">
<router-link :to="{ name: 'HouseDetails', params: { id: house.id}}" >
<h2>ID = {{ house }}</h2>
<h3> {{ house.location.street}} </h3>
<img :src="house.image" />
</router-link>
<button v-if="house.madeByMe" class="delete" #click="deleteHouse(house.id)">Delete</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Houses',
data(){
return {
houses: [],
}
},
created() {
this.getHouses();
},
methods: {
getHouses(){
// GET request using axios with set headers
const headers = { "CENSORED": "CENSORED" };
axios.get('myAPI', { headers })
.then(response => this.houses = response.data);
},
deleteHouse(id) {
const headers = { "CENSORED": "CENSORED" };
axios.delete('myAPI' + id, { headers })
.then(response => {
console.log(response);
})
.catch(function (error) {
console.log(error.response);
});
},
},
}
</script>
I somehow need to implement the filter by text input, so that for example, if user types a city name it will show all of those houses or a street name to filter that by street.
Any suggestions how I can do that with code that I already have?

You can use computed property:
new Vue({
el: '#demo',
data() {
return {
search: '',
houses: [{ "id": 2, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "assas", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false }, { "id": 3, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "adb", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false },{ "id": 4, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "bbb", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false }],
}
},
computed: {
filteredHouses(){
return this.houses.filter(h => h.location.city.toLowerCase().includes(this.search.toLowerCase()))
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="search__sort">
<input v-model="search" placeholder="Search for a house">
<button class="sort__button">Price</button>
<button class="sort__button">Size</button>
</div>
<div v-for="house in filteredHouses" :key="house.id" class="house">
<h3> {{ house.location.city}} </h3>
<img :src="house.image" />
</div>
</div>

You will want to distinguish the difference between houses and displayedHouses such that, displayedHouses is your filtered array.
<h2>ID = {{ house }}</h2> is not going to play well with your testing
displayedHouses will be a computed looking something like:
computed:
{
/**
* #return {array} List of displayed houses from search input
*/
displayedHouses()
{
if (!this.houses || !this.houses.length)
{
return []
}
if (!this.search)
{
return this.houses
}
return this.houses.filter( (house) =>
{
return house.city.includes(this.search) || house.state.includes(this.search) // || whatever else you want
})
}
},

Display data from an Api in a v-data-table, an object within an object vue js, vuetify

I have the following Json coming from an api, which I want to present in a V-DATA-TABLE:
[
{
"id": 1,
"firstName": "Ana",
"lastName": "Lucia",
"phone": "(11)99989-8989",
"mobilePhone": "(11)99989-8989",
"email": "aninha#gmail.com",
"gender": {
"name": "feminino"
},
"status": {
"name": "inativo"
},
"services": [
{
"name": "progressiva"
},
{
"name": "Manicure"
}
]
},
{
"id": 2,
"firstName": "Maria",
"lastName": "Luiza",
"phone": "(12)32333-3333",
"mobilePhone": "(43)45555-5555",
"email": "marialu#gmail.com",
"gender": {
"name": "feminino"
},
"status": {
"name": "pendente"
},
"services": [
{
"name": "progressiva"
}
]
},
{
"id": 3,
"firstName": "Mario",
"lastName": "Braz",
"phone": "(11)23232-3222",
"mobilePhone": "(11)23232-3222",
"email": "mariobraz#gmail.com",
"gender": {
"name": "masculino"
},
"status": {
"name": "ativo"
},
"services": [
{
"name": "progressiva"
}
]
}
]
However in the Data table the field that the Services would come from, is empty as shown in the image:
Here is the code of my .Vue data:
data: () => ({
dialog: false,
pageTitle: 'Employees',
headers: [
{
text: 'First Name',
align: 'start',
sortable: false,
value: 'firstName',
},
{ text: 'Last Name', value: 'lastName' },
{ text: 'Email', value: 'email' },
{ text: 'Phone', value: 'phone' },
{ text: 'Mobile Phone', value: 'mobilePhone' },
{ text: 'Gender', value: 'gender.name' },
{ text: 'Status', value: 'status.name' },
{ text: 'Services', value: 'services.name' },
{ text: 'Actions', value: 'action', sortable: false },
],
search: '',
employees: [],
genders: [],
status: [],
services:[],
editedIndex: -1,
editedItem: {},
defaultItem: {},
}),
I noticed that when I change this code snippet and leave only 'services':
{ text: 'Services', value: 'services' },
exactly the number of objects that are the services appears but not the names:
Here is the method I used to pull the main object that is the 'employees' and all their relationships:
methods: {
initialize () {
axios.get('http://192.168.26.130:3000/employees/').then(response => {
this.employees = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/genders/').then(response => {
this.genders = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/employee-status').then(response => {
this.status = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
axios.get('http://192.168.26.130:3000/services').then(response => {
this.services = response.data
console.log(response)
}).catch(e => {
console.log(e)
});
},

{ text: 'Services', value: 'services.map(s => s.name).join(", ") }
will display the services names, separated by ', ' (comma + space).
Alternative method, using template:
<template v-slot:item.services="{ item }">
{{ item.services.map(s => s.name).join(', ') }}
</template>

services prop is an array:
"services": [
{
"name": "progressiva"
},
{
"name": "Manicure"
}
]
If you want to display the first value, write:
{ text: 'Services', value: 'services[0].name' },
Otherwhise, you need to transform the array.

call external function in vuejs component

I want use jsgrid.min.js to create table in vue component.I should call this in jsgrid.min.jsfunction
jsGrid(..)
how can i do this?(call a function that placed outer the vue component in component )
component.vue
<template>
<div id="jsGrid">
</div>
</template>
<script>
export default {
data: () => ({
name: "mja"
}),
mounted () {
$("#jsGrid").jsGrid({
width: "100%",
height: "500px"
});
}
}
</script>
<style scoped>
</style>
error
[Vue warn]: Error in mounted hook: "TypeError: $(...).jsGrid is not a function"
I actually embedded src file
<script type="text/javascript" src="{{ asset('plugins/jsgrid/dist/jsgrid.min.js')}}"></script>

You Need To Include Jquery as jsGrid using Jquery , Here is Working Demo :)
var app = new Vue({
el: '#app',
mounted:function(){
jQuery("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: this.clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
},
data: {
message: 'Hello Vue App!',
clients : [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
],
countries :[
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
<div id="jsGrid"></div>
</div>

v-model for dynamically generated checkboxes

Here is my fiddle : DEMO
modules: [{
moduleName: "Module ABC",
id: 1,
actions: [{
actionName: "addbrand",
id: 1,
permissions: [{
permissionName: "read",
"id": 1,
"value": true
}, {
permissionName: "write",
"id": 2,
"value": true
}, {
permissionName: "execute",
"id": 1,
"value": false
}]
}]
Checkboxes are dynamically generated iterating over "modules" array in data object. But I am finding it difficult to assign v-model and capture the checked values for the corresponding "action" for its respective "module"'
How do I do this?
<div v-for="module in modules"><b>{{ module.moduleName }}</b>
<div v-for="action in module.actions">{{ action.actionName }}
<div v-for="permission in action.permissions">
<input type="checkbox"> {{ permission.permissionName }}
</div>
</div>
<hr>
</div>
Any help would be much appreciated. Thank you..

I am not sure having nesting more than 2 v-for is a good idea. But you can create an index in v-for as: <p v-for='(foo, index) in array' and use the index to track changes.
In you case you do something like this https://jsfiddle.net/samayo/az9hge7u/5/
new Vue({
el: '#app',
data: {
modules: [{
moduleName: "Module ABC",
id: 1,
actions: [{
actionName: "addbrand",
id: 1,
permissions: [{
permissionName: "read",
"id": 1,
"value": true
}, {
permissionName: "write",
"id": 2,
"value": true
}, {
permissionName: "execute",
"id": 1,
"value": false
}]
}, {
actionName: "addproduct",
id: 2,
permissions: [{
permissionName: "read",
id: 1,
value: true
}, {
permissionName: "write",
id: 2,
value: true
}, {
permissionName: "execute",
id: 1,
value: false
}]
}]
}, {
moduleName: "Module PQR",
id: 2,
actions: [{
actionName: "addrules",
id: 3,
permissions: [{
permissionName: "read",
id: 1,
value: true
}, {
permissionName: "write",
id: 2,
value: true
}, {
permissionName: "execute",
id: 1,
value: false
}]
}, {
actionName: "addactions",
id: 4,
permissions: [{
permissionName: "read",
id: 1,
value: true
}, {
permissionName: "write",
id: 2,
value: true
}, {
permissionName: "execute",
id: 1,
value: false
}]
}]
}]
}
})
<script src="https://unpkg.com/vue#2.5.3/dist/vue.js"></script>
<div id="app">
<div v-for="(module, moduleIndex) in modules"><b>{{ module.moduleName }}</b>
<div v-for="(action, actionIndex) in module.actions">{{ action.actionName }}
<div v-for="(permission, permIndex) in action.permissions">
<input type="checkbox" v-model='modules[moduleIndex].actions[actionIndex].permissions[permIndex].value'> {{ permission.permissionName }} - {{modules[moduleIndex].actions[actionIndex].permissions[permIndex].value}}
</div>
</div> <hr>
</div>

https://jsfiddle.net/srinivassunkari/t2fjzLpn/29/
1 Because of mutation no need to use the index to update the values of permission 'value'
2 When you use v-model it updates the value of the permission in the module.action.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="module in modules"><b>{{ module.moduleName }}</b>
<div v-for="action in module.actions">{{ action.actionName }}
<div v-for="permission in action.permissions">
<input type="checkbox" v-model="permission.value">
{{ permission.permissionName }}
</div>
</div>
<hr>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
modules: [{
moduleName: "Module ABC",
id: 1,
actions: [{
actionName: "addbrand",
id: 1,
permissions: [{
permissionName: "read",
"id": 1,
"value": true
}, {
permissionName: "write",
"id": 2,
"value": true
}, {
permissionName: "execute",
"id": 1,
"value": false
}]
}]
}]
}
},
// for understanding purpose added no need to consider this...
watch: {
modules: {
deep: true,
handler(modules) {
console.log('modules', modules)
}
}
}
})
</script>

How to bind foreign key kendo ui dropdownlist (with angular)

I am working with kendo UI and angular grid application. My grid is populated from JSON data (separate file) and I am use angular service:
My JSON data:
[
{ "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentTypeId": 1 },
{ "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentTypeId": 2 },
{ "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentTypeId": 3 },
{ "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentTypeId": 2 },
{ "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentTypeId": 4 },
{ "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentTypeId": 6 }
]
My Angular service:
angular.module("app").factory('myService', function ($http) {
return {
getAll: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
},
getDocumentTypes: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
}
}
});
This is my controller:
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
$scope.tabStrip.select(0);
});
$scope.masterDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
url = "/Scripts/app/data/json/master/masterGridData.js",
myService.getAll(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
})
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AccountNo: { type: "string" },
PostingDate: { type: "string" },
MaturityDate: { type: "string" },
Description: { type: "string" },
DocumentTypeId: { type: "number" }
}
}
},
pageSize: 16
});
$scope.gridMaster = {
columns: [
{ field: "Id", hidden: true },
{ field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Posting Date", width: "70px" },
{ field: "MaturityDate", title: "Maturity Date" width: "70px" },
{ field: "Description", title: "Description", width: "170px" },
{ field: "DocumentTypeId", hidden: true }
],
dataSource: $scope.masterDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 16,
//refresh: true,
pageSizes: ["50", "100", "200", "All"]
},
toolbar: [{
name: "create"
}],
change: function () {
var dataItem = this.dataItem(this.select());
$scope.isRowSelected = true;
$scope.id = dataItem.Id;
$scope.accountNumber = dataItem.AccountNo;
$scope.postingDate = dataItem.PostingDate;
$scope.description = dataItem.Description;
$scope.maturityDate = dataItem.MaturityDate;
$scope.documentTypeId = dataItem.DocumentTypeId;
}
};
$scope.documentType = {
dataSource: {
transport: {
read: function (options) {
url = "/Scripts/app/data/json/documentType.js",
myService.getDocumentTypes(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
});
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
}
},
dataTextField: "Name",
dataValueField: "Id"
}
});
This is my JSON which contain data for documentType:
[
{ "Id": 1, "Name": "Document 1" },
{ "Id": 2, "Name": "Document 2" },
{ "Id": 3, "Name": "Document 3" },
{ "Id": 4, "Name": "Document 4" },
{ "Id": 5, "Name": "Document 5" },
{ "Id": 6, "Name": "Document 6" }
]
And this is my HTML:
<html>
<head>
<!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
<div class="divH3Style">
<h3 class="h3LabelForm">Grid Master</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
</div>
</div>
<div id="tabstrip-2" style="overflow: hidden">
<div id="tabStrip2Half1">
<div class="divHeightStyle">
<label for="accountNumber" class="labelTextSize">Account Number:</label>
<input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
</div>
<div class="datepickerStyle">
<label for="postingDate" class="labelTextSize">Posting Date:</label>
<input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
</div>
<div class="divHeightStyle">
<label for="desccription" class="labelTextSize">Description:</label>
<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
</div>
<div class="datepickerStyle">
<label for="maturityDate" class="labelTextSize">Maturity Date:</label>
<input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
</div>
</div>
<div id="tabStrip2Half2">
<div class="divHeightStyle">
<label for="documentType" class="labelTextSize">Document Type:</label>
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
</div>
<div>
<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
In HTML I have dropdownlist which contain data for documentType and my dropdownlist is populated with JSON data. But, problem is in binding. When I select some grid row dropdownlist always display first item. My grid datasource contain foreign key value (documentTypeId) and this value should match with Id value from documentType JSON file, ie $scope.documentType property dataValueFiled value. How can bind this dropdownlist? Pls help..

For solve that problem I use hardCoded variable:
$scope.documentTypeDS = [
{ "value": 1, "text": "doc 1" },
{ "value": 2, "text": "doc 2" },
{ "value": 3, "text": "doc 3" },
{ "value": 4, "text": "doc 4" },
{ "value": 5, "text": "doc 5" },
{ "value": 6, "text": "doc 6" }
];
And modified definition for my gridMaster. In gridMaster column property I insert:
{ field: "DocumentTypeId", hidden: true, values: $scope.documentTypeDS },
And, In HTML i modified code lines, from this:
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
to this:
<input kendo-drop-down-list k-data-text-field="'text'" k-data-value-field="'value'" data-bind="value:documentTypeId"
class="k-dropdownField" k-data-source="documentType" ng-readonly="isReadonly" ng-model="documentTypeId" />
I suppose that there is a better solution of this, because I use hardCoded part of code for define $scope.documentTypeDS.