我想在單擊芯片本身時更改芯片的顏色，并在再次單擊時將其更改回來。
到目前為止，我還沒有能夠做到這一點。我知道:color最初可以用于動態更改顏色，但單擊后不確定。
我有一個陣列來存盤選定的值。
data () {
return {
restrictions = ['Restriction 1','Restriction 2','Restriction 3','Restriction 4'],
selectedRestrictions = []
}
},
methods(){
handleChipColor(){
return 'primary';
},
selectRestriction(restriction){
const el = this.selectedRestrictions.findIndex(el => el === restriction);
el < 0 ? this.selectedRestrictions.push(restriction) : this.selectedRestrictions.splice(el,1);
}
}<v-chip class="margin" :color="handleChipColor" v-for="restriction in restrictions" @click="selectRestriction(restriction)" :key="restriction">{{restriction}}</v-chip>我能夠操縱陣列來選擇芯片的顏色，我只是不是 100% 確定如何更新芯片上的顏色。
任何幫助表示贊賞。
uj5u.com熱心網友回復：
將條件直接系結到顏色道具應該這樣做，例如試試這個：
Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
restrictions: ['Restriction 1', 'Restriction 2', 'Restriction 3', 'Restriction 4'],
selectedRestrictions: []
}
},
methods: {
selectRestriction(restriction) {
const el = this.selectedRestrictions.findIndex(el => el === restriction);
el < 0 ? this.selectedRestrictions.push(restriction) : this.selectedRestrictions.splice(el, 1);
}
}
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-chip-group>
<v-chip v-for="(item, i) in restrictions" :color="selectedRestrictions.includes(item) ? 'error' : 'primary'" @click="selectRestriction(item)" :key="i">{{item}}</v-chip>
</v-chip-group>
</v-app>
</div>您還可以將條件包裝在方法中，然后將方法系結到顏色道具，如下所示：
handleColor(item) {
return this.selectedRestrictions.includes(item) ? 'error' : 'primary';
}
模板：
<v-chip v-for="(item, i) in restrictions" :color="handleColor(item)" ...
uj5u.com熱心網友回復：
我意識到我需要做的就是檢查該:color屬性的函式呼叫上的陣列。
checkIfRestrictionSelected(restriction){
// Pick the two colors to alternate
return this.selectedRestrictions.find(el => el === restriction) ? 'primary' : 'secondary';
}<v-chip class="margin" :color="checkIfRestrictionSelected(restriction)" @click="selectRestriction(restriction)" v-for="restriction in restrictions" :key="restriction">{{restriction}}</v-chip>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342604.html
標籤：Vue.js vuetify.js
上一篇：如何在不交換Vuejs的情況下更改陣列元素位置？[復制]
下一篇：如何在單擊時執行多個事件？