Vue Material - 设计 table 按钮的样式？

Question

我正在玩 Vue and the Vue Material components, specifically the Table component。

我想做的是在标题为 Within cards with Pagination and Inline Edit 的 table 示例中更改搜索 icon/button 的颜色，但似乎我一定遗漏了一些东西，因为我无法让它从默认的灰色颜色更改，我正在努力理解为什么会这样。

我有一个基本页面，其中包含 Vue 以及 Vue material 所需的字体和图标以及它工作所需的 Javascript 和 CSS 文件.

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdn.rawgit.com/marcosmoura/vue-material/master/dist/vue-material.css" />
</head>
<body>
  <div id="app" v-md-theme="'default'">
    <md-table-card>
      <md-toolbar>
        <h1 class="md-title">Nutrition</h1>
        <md-button class="md-icon-button">
          <md-icon>filter_list</md-icon>
        </md-button>

        <md-button class="md-icon-button" @click="toggleSearch()">
          <md-icon v-if="searchEnabled" class="md-accent">search</md-icon>
          <md-icon v-else>search</md-icon>
        </md-button>
      </md-toolbar>

      <md-table md-sort="dessert" md-sort-type="desc" @select="onSelect" @sort="onSort">
        <md-table-header>
          <md-table-row>
            <md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
            <md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
            <md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
            <md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
            <md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>
            <md-table-head>
              <md-icon>message</md-icon>
              <span>Comments</span>
            </md-table-head>
          </md-table-row>
        </md-table-header>

        <md-table-body>
          <md-table-row v-for="(row, rowIndex) in nutrition" :key="rowIndex" :md-item="row" md-auto-select md-selection>
            <md-table-cell v-for="(column, columnIndex) in row" :key="columnIndex" :md-numeric="columnIndex !== 'dessert' && columnIndex !== 'comment'" v-if="columnIndex !== 'type'">
              <md-table-edit
                :md-name="'comment' + columnIndex"
                :md-id="'comment' + columnIndex"
                md-placeholder="Add a comment"
                md-maxlength="120"
                v-model="nutrition[rowIndex].comment"
                v-if="columnIndex === 'comment'"></md-table-edit>

              <span v-if="columnIndex !== 'comment'"></span>
            </md-table-cell>
          </md-table-row>
        </md-table-body>
      </md-table>

      <md-table-pagination
        md-size="10"
        md-total="5"
        md-page="1"
        md-label="Rows"
        md-separator="of"
        :md-page-options="[5, 10, 25, 50]"
        @pagination="onPagination"></md-table-pagination>
    </md-table-card>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js" type="text/javascript"></script>
  <script src="https://cdn.rawgit.com/marcosmoura/vue-material/master/dist/vue-material.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
</body>
</html>

app.js:

// Enable Vue Material
Vue.use(VueMaterial);

// Apply theme
Vue.material.theme.register('default', {
  primary: 'blue',
  accent: 'light-blue'
});

// Initialise Vue
new Vue({
  el: '#app',
  data: {
    nutrition: [{
      dessert: 'Frozen yogurt',
      type: 'ice_cream',
      calories: '159',
      fat: '6.0',
      carbs: '24',
      protein: '4.0',
      comment: 'Icy'
    }],
    selectedData: [],
    sort: {},
    page: {},
    searchEnabled: false
  },
  methods: {
    onSelect: function (data) {
      this.selectedData = data;
      this.$forceUpdate();
    },
    onSort: function (sort) {
      this.sort = sort;
    },
    onPagination: function (page) {
      this.page = page;
    },
    toggleSearch: function () {
      console.log(this.searchEnabled);
      if (this.searchEnabled) {
        this.searchEnabled = false;
      } else {
        this.searchEnabled = true;
      }
    }
  }
});

当我加载页面时，我得到了带有 table 的应用程序，就像示例一样。当我单击搜索图标时，我可以从方法 toggleSearch() 中看到控制台日志，它按预期在布尔值之间变化，但是，搜索图标的颜色没有改变。

查看搜索按钮的组件 HTML：

<md-button class="md-icon-button" @click="toggleSearch()">
  <md-icon v-if="searchEnabled" class="md-accent">search</md-icon>
  <md-icon v-else>search</md-icon>
</md-button>

我使用 if / else 条件在重音 class 和我假设的默认灰色之间切换，具体取决于布尔值 searchEnabled，这适用于独立按钮，但只是不在 table.

内

任何人都可以提出为什么会发生这种情况的原因，或者我应该如何处理 table 中此按钮的样式。非常感谢任何输入或反馈，非常感谢！

（如果你能建议 Vue 中是否有条件应用 class 的方法，即不使用 v-if、v-else 并复制图标元素，则加分，我还有另一种方法可以根据布尔值应用 class 并仅使用一个图标元素吗？）

Answer 1

是的，您可以使用 VueJs 进行动态样式设置，Here 是相同的文档。您可以将对象传递给 v-bind:class 以动态切换 classes:

<md-button class="md-icon-button" @click="toggleSearch()">
  <md-icon v-bind:class="{ 'md-accent': searchEnabled }">search</md-icon>
</md-button>

以上语法意味着 md-accent class 的存在将由数据的真实性决定属性 searchEnabled.

Answer 2

这是一个已在 v0.4.0 中修复的错误

Vue Material - 设计 table 按钮的样式？

Vue Material - Styling the table buttons?

vue.js

vue-material