在 v-for 中单击时如何更改所选 Bootstrap Vue 卡片的边框变体
How to change the border variant of a selected Bootstrap Vue card when clicked in v-for
我的 b-card
和 v-for
的显示和功能基本符合预期,我 运行 遇到的一个问题是更改所选卡片的边框变体.到目前为止,我已经尝试将卡内的 v-for 嵌套在 div
容器中,然后使用 v-if
检查并查看是否已选择卡。此代码以我想要的方式更改边框变体,但我只希望所选卡片更改其边框变体。如上所述工作的代码如下所示。
<div v-for="(team, index) in teams" :key="index">
<b-card
v-if="selected"
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
border-variant="success"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(stuff)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
<b-card
v-else
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(stuff)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
</div>
selected
属性 在我的 data() 上,我有一个我们将调用 functionThatChangesColorAndDoesOtherStuff()
的函数,其中选择的 属性 被切换。方法代码如下
data() {
return {
teams: [],
selected: false
}
}
functionThatChangesColorAndDoesOtherStuff(stuff) {
this.selected = !this.selected
\\Business logic below that does business stuff with the stuff
}
我也尝试过在 v-for 中使用索引,但这甚至没有让我达到颜色完全改变的地步。这让我觉得我没有正确使用它,我需要一些帮助来实现这种效果。我已经检查过 SO 并且没有看到与我的情况类似的例子,我将再次重申。我想单击加号按钮并更改所选卡片的边框变体。
首先,不要只使用 v-if 和 v-else 作为 class 名称,而是使用以下
:class=" selected ? 'className1' : 'className2' "
第一个值必须是真值。以下是将根据值应用的 class 名称。
请查看以下代码段:
您可以像这样绑定边框: :border-variant="selected === index ? 'success' : 'danger'"
,并将索引传递给函数。
new Vue({
el: '#demo',
data() {
return {
teams: [1,2,3],
selected: []
}
},
methods: {
functionThatChangesColorAndDoesOtherStuff(idx) {
if (this.selected.includes(idx)) {
this.selected = this.selected.filter(s => s !== idx)
} else this.selected.push(idx)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div v-for="(team, index) in teams" :key="index">
<b-card
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
:border-variant="selected.includes(index) ? 'success' : 'danger'"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(index)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
</div>
</div>
我的 b-card
和 v-for
的显示和功能基本符合预期,我 运行 遇到的一个问题是更改所选卡片的边框变体.到目前为止,我已经尝试将卡内的 v-for 嵌套在 div
容器中,然后使用 v-if
检查并查看是否已选择卡。此代码以我想要的方式更改边框变体,但我只希望所选卡片更改其边框变体。如上所述工作的代码如下所示。
<div v-for="(team, index) in teams" :key="index">
<b-card
v-if="selected"
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
border-variant="success"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(stuff)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
<b-card
v-else
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(stuff)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
</div>
selected
属性 在我的 data() 上,我有一个我们将调用 functionThatChangesColorAndDoesOtherStuff()
的函数,其中选择的 属性 被切换。方法代码如下
data() {
return {
teams: [],
selected: false
}
}
functionThatChangesColorAndDoesOtherStuff(stuff) {
this.selected = !this.selected
\\Business logic below that does business stuff with the stuff
}
我也尝试过在 v-for 中使用索引,但这甚至没有让我达到颜色完全改变的地步。这让我觉得我没有正确使用它,我需要一些帮助来实现这种效果。我已经检查过 SO 并且没有看到与我的情况类似的例子,我将再次重申。我想单击加号按钮并更改所选卡片的边框变体。
首先,不要只使用 v-if 和 v-else 作为 class 名称,而是使用以下
:class=" selected ? 'className1' : 'className2' "
第一个值必须是真值。以下是将根据值应用的 class 名称。
请查看以下代码段:
您可以像这样绑定边框: :border-variant="selected === index ? 'success' : 'danger'"
,并将索引传递给函数。
new Vue({
el: '#demo',
data() {
return {
teams: [1,2,3],
selected: []
}
},
methods: {
functionThatChangesColorAndDoesOtherStuff(idx) {
if (this.selected.includes(idx)) {
this.selected = this.selected.filter(s => s !== idx)
} else this.selected.push(idx)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div v-for="(team, index) in teams" :key="index">
<b-card
img-src="https://picsum.photos/600/300/?image=25"
img-alt=""
v-model="selected"
:border-variant="selected.includes(index) ? 'success' : 'danger'"
img-bottom
no-body
class="mb-4 mr-4"
body-class="text-center"
>
<b-row class=" my-2" align-h="center">
<b-link @click="functionThatChangesColorAndDoesOtherStuff(index)"><b-icon icon="plus-circle" font-scale="2.5"></b-icon></b-link>
</b-row>
</b-card>
</div>
</div>