Как передать 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
→ Ссылка