Vue：如何显示每个＆＃34; leaf＆＃34;表中的嵌套对象数组？

Question

我有一个如下所示的数组：

<script type="text/javascript">

  function change_value(product){

    <% @billeable_qts[****product.id****] = ***document.getElementById('product.id').value****  %>
    <% @billeable_qts.each do |key, value| %>
       <% alert = "Key = " + key + ", value: " + value.to_s%>
       alert ("product: <%= alert %>")
    <% end %>


  }

</script>

我想只显示＆＃34; leafs＆＃34;这个数组在一个表中，同时显示了叶子的父母。我想生成以下HTML：

var arr = [{
  text: '1'
}, {
  text: '2'
  children: [{
    text: '2.1'
  }]
}, {
  text: '3',
  children: [{
    text: '3.1'
  }, {
    text: '3.2',
    children: [{
      text: '3.2.1'
    }, {
      text: '3.2.2'
    }]
  }]
}];

我尝试了以下操作，但它不起作用，因为<table> <tr> <td>1</td> </tr> <tr> <td>2 | 2.1</td> </tr> <tr> <td>3 | 3.1</td> </tr> <tr> <td>3 | 3.2 | 3.2.1</td> </tr> <tr> <td>3 | 3.2 | 3.2.2</td> </tr> </table> 散布在<section> s。

<tr>

Answer 1

在Vue中，尝试简化数据结构以满足您的显示需求总是比尝试找到使用模板中的指令显示数据的迂回方式更好。

通常，简化数据的最佳方法是通过计算属性。正如@RoyJ建议的那样，您可以创建一个计算属性，该属性将从对象的树结构中递归生成一个展平的数组，然后引用在模板中计算的数据。

这是我将如何做到的：

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      arr: [{
        text: '1'
      }, {
        text: '2',
        children: [{
          text: '2.1'
        }]
      }, {
        text: '3',
        children: [{
          text: '3.1'
        }, {
          text: '3.2',
          children: [{
            text: '3.2.1'
          }, {
            text: '3.2.2'
          }]
        }]
      }]
    }
  },
  computed: {
    flatArr() {
      let flatArr = [];
      let addToFlatArr = ({ items, base }) => {
      	items.forEach((item) => {
          let { text, children } = item;
          let val = (base || '')  + text;
          if (children) {
            addToFlatArr({ items: children, base: val + ' | '})
          } else {
            flatArr.push(val);
          }
        })
      };
      addToFlatArr({ items: this.arr });
      return flatArr;
    }   
  },
})

＆＃13;

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

<div id='app'>
  <table>
    <tr v-for="item in flatArr">
      <td>{{ item }}</td>
    </tr>
  </table>  
</div>

＆＃13;

＆＃13;

＆＃13;