Question

我想显示工具的多个html表（1表= 1工具的类别/ 1 tr = 1工具）。

data() {
    return {
      cats: '',
      tools: [],
    };
  },
  methods: {
    getToolCats() {
      var rez = getToolCats();
      rez.then(data => this.receiveCats(data) ) 
    },
    receiveCats(_cats){
      this.cats = _cats;
      _cats.forEach(cat => {
        getToolsByCat(cat.href).then(data => this.tools[cat.href] = data);
      });
      console.log(this.tools);
    },
  },
  mounted() {
    this.getToolCats();
  },

猫（即类别）是一个用API调用填充的数组。然后，对于每只猫，一个API调用会给我该猫的工具列表，并将其放入tools数组（this.tools [cat.href] = data）。

这是显示代码：

<div v-for="cat in cats" :key="cat.href" class="tbox col-xs-12 col-sm-6">
    ....
    <table class="table table-hover">
        <tr v-for="tool in tools[cat.href]" :key="tool.href">
            <td>...</td>
        </tr>
    </table>
    ....
</div>

如果我使用单个var存储工具列表，则一切正常。但是，尽管我不知道我要养多少只猫，但我无法为每个类别创建一辆汽车。

我认为问题可能存在：

在v-for中使用带有未在挂载状态下定义的键的数组：

v-for =“工具[cat.href]中的工具

我将不胜感激！

Answer 1

this.tools[cat.href] = data中的can't detect dynamic property addition，但是它会使用 this.$set(this.tools, cat.href, data) 中的this.$set或Vue.set来检测更改：

new Vue({
  el: '#app',
  data() {
    return {
      cats: [],
      tools: {}, // <-- make this an object (not an array)
    };
  },
  mounted() {
    this.getToolCats();
  },
  methods: {
    getToolCats() {
      // setTimeout to simulate delayed API calls...
      setTimeout(() => {
        this.cats = [
          { href: 'https://google.com' },
          { href: 'https://microsoft.com' },
          { href: 'https://apple.com' },
          { href: 'https://amazon.com' },
        ];
        this.cats.forEach((cat, i) => {
          setTimeout(() => {
            const data = { href: cat.href };
            this.$set(this.tools, cat.href, data); // <-- use this.$set for dynamic property addition
          }, i * 1000);
        })
      }, 1000);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div v-if="!cats || cats.length == 0">Loading...</div>
  <div v-for="cat in cats" :key="cat.href" v-else>
    <table>
      <tr v-for="tool in tools[cat.href]" :key="tool.href">
        <td>cat.href: {{cat.href}}</td>
      </tr>
    </table>
  </div>
  <pre>tools: {{tools}}</pre>
</div>

Vue.js：如何使用v-for迭代到动态数组

1 个答案: