Как передать string через props в рекурсию
Есть компонент Tree.vue
<p class="tree-list">
<node-tree :text="'/catalog/applicabilities/edit?id='"
v-for="item in treeData" :node="item" :key="item.id" ></node-tree>
</p>
Который передаёт пропс в NodeTree.vue
<template>
<div class="node-tree">
<a :href="url + node.id" class="label font-weight-bold" :myid="node.id" :myname="node.name">{{ node.name }} {{url}}</a>
<a v-if="node.children && node.children.length" v-b-toggle="node.id.toString()" class="dropicn m-1 font-weight-bold"> > </a>
<!-- Element to collapse -->
<b-collapse :id="node.id.toString()">
<ul> <node1 v-for="child in node.children" :node="child" :key="child.id"></node1> </ul>
</b-collapse>
</div>
</template>
<script>
export default {
name: "node1",
props: {
text: String,
node: Object,
},
data() {
return {
url: ''
}
},
mounted() {
let xxx='';
if(this.url===''){
xxx = this.text+' test'
this.url=xxx
}
}
};
</script>
В итоге, получается, что {{url}} корректно отображается только в родителях, а в детях получаю такое вот Имя undefined test. Если url передавать не пропсом, а сразу назначать в NodeTree.vue то всё работает корректно.
Ответы (1 шт):
Автор решения: Андрей Иванов
→ Ссылка
Решение было очевидным, нужно было каждый раз передавать пропс себе же.
<node1 v-for="child in node.children" :node="child" :key="child.id" :url="url"></node1