Bom dia.
Estou com problema em fazer um campo "search" para um TreeView. Gostaria de algum exemplo/dica.. E onde estou errando...
Estou usando como exemplo o https://vuejs.org/v2/examples/tree-view.html
main.js
import _ from 'lodash'
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
import TreeView from './components/modTreeView.vue';
new Vue({
el: '#container',
components: {
TreeView
}
});arquivo.blade.php
<div class="col-xs-12" id="container">
<tree-view datatree="{{ $data }}"></tree-view>
</div>Ahh a data que passo é essa : O $data vem de um controller e alimenta minha view eu poderia ter feito com o vue resource tambem que daria na mesma coisa. (O importante que passa um json ai ^^)
$data = '{
"name": "My Tree",
"children": [
{ "name": "hello" },
{ "name": "wat" },
{
"name": "child folder",
"children": [
{
"name": "child folder",
"children": [
{ "name": "hello" },
{ "name": "wat" }
]
},
{ "name": "hello" },
{ "name": "wat" },
{
"name": "child folder",
"children": [
{ "name": "hello" },
{ "name": "wat" }
]
}
]
}
]
}';modTreeView.vue
<template>
<div>
<div>
<input type="text" class="form-control" placeholder="Filtrar Tree View" v-model="filterTerm">
</div>
<ul>
<item class="item" :model="filterList"></item>
</ul>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('item', {
template: `<li>
<div
:class="{bold: isFolder}"
@click="toggle"
@dblclick="changeType">
{{model.name}}
<span v-if="isFolder">[{{open ? "-" : "+"}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="model in model.children"
:model="model">
</item>
<li class="add" @click="addChild">+</li>
</ul>
</li>`,
props: {
model: Object
},
data: function () {
return {
open: false,
filterTerm: ''
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function () {
this.model.children.push({
name: 'new stuff'
})
}
}
})
export default {
props: ['datatree'],
data(){
return{
list: [],
sortProperty: 'name',
sortDirection: 1,
filterTerm: ''
}
},
ready(){ //mounted
console.log('testeeee');
// console.log(this.datatree);
this.list = JSON.parse(this.datatree);
// console.log(this.list);
},
computed:{
filterList(){
console.log('computed');
console.log(this.list);
console.log(typeof this.list);
if(this.filterTerm){
let exp = new RegExp(this.filterTerm.trim(), 'i');
// return this.list.children.filter(x => exp.test(x.name));
var res = this.list.children.filter(function(filho){
return exp.test(filho.name);
});
return res;
}else{
return this.list;
}
}
},
methods: {
sort (ev, proper) {
ev.preventDefault()
this.sortProperty = proper;
if(this.sortDirection == 1){
this.sortDirection = -1
}else{
this.sortDirection = 1
}
}
}
}
</script>
<style scoped=''>
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>Eu fiz um computed chamado filterList para fazer esse filtro mas nao me retorna corretamente a lista...
PS: E possivel fazer esse tipo de filtro usando o filterBy ?? Qual a melhor maneira de fazer isso ?
PS2: Tambem nao entendi muito bem como serve o 'template' que o vue tras como exemplo.. por exemplo parece que ele chama ele mesmo e isso mesmo ?! tem como separar esse template como modulo ?
