首先,我是新来的节目和新的这个渠道,所以我很抱歉,如果我的问题的结构是不正确的。如果需要,我可以提供更多的细节。在此先感谢您的帮助。
上下文:我有多个选项(按钮)的图,其中用户可以选择多达其中5。一旦用户选择第五个按钮所有其他按钮应该得到禁止。如果用户再次点击选择按钮中的一个,其他所有的按钮应该得到重新启用。我怎样才能实现这个逻辑是什么?
我使用VUE js和vuetify。
这可能不是最好的解决办法,但有一次我在一个按钮,用户点击我改变类按钮的,所以它看起来好像它是积极的。然后,我计算已被点击禁用按钮的按键剩下的量(这是不工作)。
<v-layout>
<v-flex row wrap>
<v-card class="interests__content">
<!-- looping through interests array -->
<!-- with :class i'm binding classes to change the color of the buttons, with @click="increase()" i'm calling the increase method -->
<v-tooltip color="primary" top v-for="interest in interests" :key="interest.name">
<v-btn
v-model="selected"
flat
slot="activator"
:class="{blue:interest.checked, interest__btn: !interest.checked}"
@click="increase(interest)"
:disabled="disabled"
:checked="checked"
>{{interest.name}}</v-btn>
<span>{{interest.name}}</span>
</v-tooltip>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data() {
return {
checked: false,
selected: "",
count: 0,
disabled: false,
interests: [
{ name: "Interest1", checked: false },
{ name: "Interest2", checked: false },
{ name: "Interest3", checked: false },
{ name: "Interest4", checked: false },
{ name: "Interest5", checked: false },
{ name: "Interest6", checked: false },
{ name: "Interest7", checked: false },
{ name: "Interest8", checked: false },
{ name: "Interest9", checked: false },
]
};
},
methods: {
increase: function(interest) {
this.count += 1;
//changing the value of checked to add the blue class, with this class I add the background color to the button as if it was active.
interest.checked = !interest.checked;
if (this.count > 4) {
this.disabled = !this.disabled;
}
},
// I'm trying to check if the button has a class to implement the logic
checkIfClass: function(interest) {
interest.checked = !interest.checked;
if (interest.classList.contains("blue"));
}
},
computed: {}
};
</script>
<style scoped>
.interest__btn {
font-family: Arial;
font-size: 1em;
background: white;
color: #333333;
border: 1px solid #0091da;
text-transform: none;
}
.interest__btn:hover {
color: black;
background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
padding: 1.7em;
}
.blue {
background-color: #0091da;
color: white !important;
text-transform: none;
}
</style>
这样做的Vue的方法是让你的JS应用程序(你interests
阵列)的所有状态,然后做出处理这一状态的反应性而显示的一切。在实践中,这意味着使用computed
而不是methods
了,把国家变成屏幕上的像素的一切。
在大过去,我们会通过interests
循环计数检查的数量。在2019年,我们将使用减少(),所以...
computed:{
numChecked(){
return this.interests.reduce((acc,curr)=>acc += curr.checked?1:0,0)
}
}
然后在你的模板?
:disabled="(numChecked > 5 && !interest.checked)?'disabled':''"
我终于想出了一个解决方案,基本上都采用观察者知道当计数器是大于5并添加另一个值对处理禁用属性:`
{{interest.那么}}
<span>{{interest.name}}</span>
</v-tooltip>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data() {
return {
checked: false,
selected: "",
count: 0,
disabled: false,
interests: [
{ name: "Interest1", checked: false, disabled: false },
{ name: "Interest2", checked: false, disabled: false },
{ name: "Interest3", checked: false, disabled: false },
{ name: "Interest4", checked: false, disabled: false },
{ name: "Interest5", checked: false, disabled: false },
{ name: "Interest6", checked: false, disabled: false },
{ name: "Interest7", checked: false, disabled: false },
]
};
},
methods: {
increase: function(interest) {
//changing the value of checked to add the blue class, with this class I add
the background color to the button as if it was active.
interest.checked = !interest.checked;
if (interest.checked) {
this.count++;
} else {
this.count--;``
}
}
},
watch: {
count: function(n, o) {
if (this.count > 4) {
for (let i = 0; i < this.interests.length; i++) {
if (!this.interests[i].checked) {
this.interests[i].disabled = true;
} else {`
this.interests[i].disabled = false;
}
}
} else {
for (let i = 0; i < this.interests.length; i++) {
this.interests[i].disabled = false;
}
}
}
}
};
</script>
<style scoped>
.interest__btn {
font-family: Arial;
font-size: 1em;
background: white;
color: #333333;
border: 1px solid #0091da;
text-transform: none;
}
.interest__btn:hover {
color: black;
background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
padding: 1.7em;
}
.blue {
background-color: #0091da;
color: white !important;
text-transform: none;
}
</style>