Question

我已经复制了下面的当前代码。我试图动态生成表头，这取决于我作为type组件的支柱传递的tables（我的例子中的数据数组是我的标榜和状态）。 / p>

我通过使用if计算值中的header语句来完成此操作，以返回正确的列表。

但是，我不想为每个if添加额外的type语句。

有没有办法可以利用type道具直接绑定到匹配的数据？

<div id="root" class="container">
    <tables type="stats">

    </tables>
</div>

Vue.component('tables', {
  template: `
  <table class="table">
    <thead>
      <tr>
        <th v-for="headers in header">{{ headers }}</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th v-for="footers in header">{{ footers }}</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>1</th>
        <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
        <slot></slot>
      </tr>
    </tbody>
  </table>
  `,

  data () {
    return {
      standings: ['Rank', 'Team', 'Wins', 'Losses'],
      stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
    };
  },

  computed: {
    header() {
      if (this.type == 'standings') {
        return this.standings;
      } else {
        return this.stats;
      }
    }
  },

  props: {
    type: { required: true }
  }

});

Answer 1

如果稍微更改数据结构，可以删除if语句。

  data () {
    return {
      types:{
        standings: ['Rank', 'Team', 'Wins', 'Losses'],
        stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
      }
    };
  },
  computed: {
    header() {
      return this.types[this.type]
    }
  },
  props: {
    type: { required: true }
  }

这是一个例子。

Vue.component('tables', {
  template: `
  <table class="table">
    <thead>
      <tr>
        <th v-for="headers in header">{{ headers }}</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th v-for="footers in header">{{ footers }}</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>1</th>
        <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
        <slot></slot>
        </td>
      </tr>
    </tbody>
  </table>
  `,

  data () {
    return {
      types:{
        standings: ['Rank', 'Team', 'Wins', 'Losses'],
        stats: ['Number', 'Player', 'Position', 'RBI', 'HR']
      }
    };
  },
  computed: {
    header() {
      return this.types[this.type]
    }
  },
  props: {
    type: { required: true }
  }

});

new Vue({
 el: "#root"
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="root" class="container">
    <tables type="stats">

    </tables>
</div>

是否可以将组件属性用作数据变量？

1 个答案: