VueJS按ID选择[数据] [英] VueJS select by id [data]

问题描述

我有一个这样的VueJS数据存储...

I have a VueJS data store like this...

nodes: {
    id: '001',
    name: 'name1',
    text: 'test1'
    children: [
        {
            id: '002',
            name: 'name2',
            text: 'test2'
        },
        {
            id: '003',
            name: 'name3',
            text: 'test3'
            children: [
                    {
                        id: '0002',
                        name: 'name02',
                        text: 'test02',
                        children: [
                                {
                                    id: '0002',
                                    name: 'name02',
                                    text: 'test02'
                                }
                        ]
                    }
            ]
        },
        {
            id: '004',
            name: 'name4',
            text: 'test4'
        }
    ]
}

注意:儿童级别(深度)为无限制

Note: children's level (deep) is UNLIMITED

我需要通过其ID选择每个，并添加/更新其同级值.

I need to select each by its id and add/update its sibling value.

示例:选择id:003并添加一个文本2:hello'

Example: "Select id: 003 and add a text2: hello '

nodes: {
    id: '001',
    name: 'name1',
    text: 'test1'
    children: [
        {
            id: '002',
            name: 'name2',
            text: 'test2'
        },
        {
            id: '003',
            name: 'name3',
            text: 'test3',
            text2: 'hello'
        },
        {
            id: '004',
            name: 'name4',
            text: 'test4'
        }
    ]
}

我设法使用method进行添加/更新，该调用是:

I managed to do the add/update part using a method which call:

this.$set(this.nodes, 'text2', 'hello')

我坚持按ID进行选择.谁能弄清楚该怎么做?

I'm stuck at selecting by id part. Can anyone figure out how to do so?

PS:我是VueJS的新手.

PS: I'm new to VueJS.

推荐答案

Nomeho的递归方法仅使用for...of语句来递归地执行此操作，该语句应比.map()或.forEach()具有一定的性能优势(当数据变得更大).如果不关心性能，请随意使用其他方法.

Pretty much Nomeho's approach on doing it recursively only this one's using for...of statement which should have some performance benefit over .map() or .forEach() (when data gets bigger). Feel free to go with the other approach if performance is not of concern.

此外，还向您展示了如何使用Vue.$set在这些节点上动态添加新道具.

Also, showing you how to dynamically add new props on these nodes with Vue.$set.

const nodes = {
  id: '001',
  name: 'name1',
  text: 'test1',
  children: [
    {
      id: '002',
      name: 'name2',
      text: 'test2'
    }, 
    {
      id: '003',
      name: 'name3',
      text: 'test3',
      children: [
        {
          id: '0002',
          name: 'name02',
          text: 'test02',
          children: [
            {
              id: '0002',
              name: 'name02',
              text: 'test02'
            }
          ]
        }
      ]
    }, 
    {
      id: '004',
      name: 'name4',
      text: 'test4'
    }
  ]
};

new Vue({
  el: '#app',

  data() {
    return {
      form: {
        id: '003',
        name: 'test2',
        value: 'hello'
      },
      
      nodes,
      lastChangedNode: {}
    }
  },
  
  methods: {
    selectNode(id, node) {
      if (node.id === id) {
        return node;
      }

      if (node.children && node.children.length) {
        for (let child of node.children) {
          let x;

          if (x = this.selectNode(id, child)) {
            return x;
          }
        }
      }
    },
    
    addDynamicItem() {
      let node = this.selectNode(this.form.id, this.nodes);
      
      if (this.lastChangedNode = node) {
        this.$set(node, this.form.name, this.form.value);
      }
      else {
        this.lastChangedNode = {
          error: 'No matching ID found'
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="form.id" placeholder="Enter a node ID" />
  <input v-model="form.name" placeholder="New property name" />
  <input v-model="form.value" placeholder="New property value" />
  <button @click="addDynamicItem">Add property</button> 
  
  <h3>Last changed node</h3>
  <pre>{{lastChangedNode}}</pre>
  
  <h3>All nodes</h3>
  <pre>{{nodes}}</pre>
</div>

这篇关于VueJS按ID选择[数据]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！