Currently, I am in the process of mastering Vue.js and I have a specific goal. I want to modify the binding value of the child component's v-model and then trigger an event in the parent component.
As I delve into the Element UI documentation, I aim to utilize the tree filter component. However, I encounter a situation where I need to directly adjust the input value of the child component at times. Strangely, the event of the child component does not seem to be functioning as expected.
All seems well but for some reason, the child component event fails to occur. What could possibly be going wrong?
This excerpt is from my child.vue file
<template>
<div>
<el-input
placeholder="Enter keyword to filter"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data2"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree2">
</el-tree>
</div>
</template>
<script>
export default {
props: ['value']
watch: {
value(val) {
this.filterText = val; // modifying the filterText value
}
filterText(val) {
// Despite reaching here, the filterNode is not being called
this.$refs.tree2.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
filterText: '',
data2: [{
id: 1,
label: 'Level 1',
children: [{
id: 4,
label: 'Level 1-1',
children: [{
id: 9,
label: 'Level 1-1-1'
}, {
id: 10,
label: 'Level 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level 2',
children: [{
id: 5,
label: 'Level 2-1'
}, {
id: 6,
label: 'Level 2-2'
}]
}, {
id: 3,
label: 'Level 3',
children: [{
id: 7,
label: 'Level 3-1'
}, {
id: 8,
label: 'Level 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
This segment is from the Parent.vue File
<child v-model="sinput></child>
...
this.sinput = "1"; // modification