2
私は、具体的Table component、VueとVue Materialコンポーネントで遊んでいます。Vue素材 - テーブルボタンのスタイリング？
Within cards with Pagination and Inline Editというタイトルの表内の検索アイコン/ボタンの色を変更したいのですが、デフォルトの色から変更することができないため、何かが欠けているようですグレーの私はなぜこれが事実であるか理解するために戦っている。
私は、私はそれを動作させるために必要とされるフォントやアイコンVueの材料のために必要とJavascriptとCSSファイルと一緒にVueのが含まれている基本的なページを持っています。
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;
}
}
}
});
私はページをロードすると、私は例のように、テーブルを使用してアプリケーションを取得します。検索アイコンをクリックすると、toggleSearch()の方法でコンソールログが表示され、期待通りにブール値が変更されますが、検索アイコンの色は変更されません。
<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>
/else条件がアクセントのクラスと私はboolen値searchEnabledに応じて、デフォルトのグレーだろうと想定して切り替えることがあれば、私はAを使用：検索ボタン用のコンポーネントのHTMLを見ると
これはスタンドアローンのボタンで動作しますが、テーブルの内部にはありません。
は、誰もがなぜこれが起こっているのか、どのように私は、テーブル内のこのボタンのスタイリングについて行くべきであるとしてその理由をお勧めでした。すべての入力またはフィードバックは非常に高く評価されます、多くのありがとう！
（ボーナスポイント条件付きでクラスを適用するのVueでの方法がある場合は、提案することができた場合に代わりにv-if、v-elseを使用して、アイコンの要素を複製する、つまり、私はに基づいて、クラスを適用するための別の方法がありますブール値は、1つのアイコンのみの要素を使用して？）
ボーナスポイント、に修正された不具合ました。なぜか、それともあなたのバグのように見えますか？ –
小さな編集をしようとしましたができませんでしたが、 '' md-accent ''の引用符を一重引用符 '' md-accent''に変更する必要があります。 –
@CraigvanTonder完了しました。ありがとうございます。これは私が答えている検索ボタンです。これは動作していないか、それは異なっていますか？ – Saurabh