question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Find nodes in "data" property not worked (return null)

See original GitHub issue

Hello! Sorry for my English… I need to find the nodes something like this:

var currPath = this.$router.history.current.path;
var nodes = this.$refs.treeMenuRef.find({
  data: { path: currPath }
})

But this code returns NULL Please tell me how to correctly find the data in the nested properties of the “data” field?

P.S. I use your control as the main menu of the SPA application and when I open the link, I need to make active (and open the parent node, if it is a child) of the desired node. Do you have any plans to add <router-link> support?

UPDATE (example) https://codesandbox.io/embed/vue-template-plhic?fontsize=14

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
amsikcommented, Sep 23, 2019

Привет. Можем на русском 😃

Вы вызываете слишком рано метод поиска. Т.е. app замаунтился, но дерево еще нет. Попробуйте так:

<template>
  <div id="app">
    <h3>Example</h3>
    <tree
      v-model="treeSelectedNode"
      ref="treeMenuRef"
      :data="treeItems"
      :options="treeOptions"
      :filter="treeFilter"
      class="tree--small"
      @tree:mounted="treeMounted"
    >
      <span class="tree-text" slot-scope="{ node }">
        <template>
          <span v-if="node.selected()" style="font-weight: 600;">{{ node.text }}</span>
          <span v-else style="color: #707070;">{{ node.text }}</span>
        </template>
      </span>
    </tree>
  </div>
</template>

<script>
import { menu } from "./menu";

export default {
  name: "App",
  data() {
    return {
      treeOptions: {
        checkbox: false,
        multiple: false,
        filter: { emptyText: "Не найдено" },
        propertyNames: {
          text: "display",
          children: "children"
        }
      },
      treeFilter: "",
      treeSelectedNode: null,
      treeItems: menu
    };
  },
  methods: {
    treeMounted() {
      //FIND EXAMPLE
      console.clear();
      console.log(menu);
      var currPath = "/journals/statistics";
      var nodes = this.$refs.treeMenuRef.find({
        data: { path: currPath }
      });
      console.log(nodes);
    }
  }
};
</script>
0reactions
mtm9999commented, Sep 24, 2019

Насчет из коробки не думаете реализовать?

Это будет слишком узкоспециализированное решение 😃 Не очень хороший подход. Есть возможность переопределить рэндер компонент… и у каждого есть свои идеи/потребности: кому router-link а кому еще что )

Ясно 😃 Еще раз спасибо.

Read more comments on GitHub >

github_iconTop Results From Across the Web

JavaScript recursion find node return null - Stack Overflow
Explanation: Your for loop keeps looping even after a match is found, so result will be overridden by null if the other elements...
Read more >
Understanding non-existent properties and working with nulls
While you can perform a MATCH where a node variable in the match is null (such as from a failed OPTIONAL MATCH), you...
Read more >
findNodeForKey returning null for copied node - GoJS
Hi, I'm having the following issue: I copy a diagram node (using localstorage as clipboard) and I paste it on the same diagram....
Read more >
Object.prototype.hasOwnProperty() - JavaScript | MDN
The method returns false if the property is inherited, or has not been declared at all. Unlike the in operator, this method does...
Read more >
HTML DOM Element nodeValue Property - W3Schools
If the node is an element node, the nodeValue property will return null. Note: If you want to return the text of an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found