Мои 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
находится в моих данных(), и у меня есть функция, которую мы будем вызывать 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 = " selected ? 'className1' : 'className2' "
Первое значение должно быть истинным значением. Ниже приведены имена классов, которые будут применяться в зависимости от значения.
вы можете сделать то же самое с вашим вариантом границы. так что в вашем случае это будет :border-variant = "selected ? 'success' : 'danger'". Это должно работать без каких-либо дополнительных операторов if или else или дополнительных классов.
Я вижу, что вы там собирались, спасибо за помощь.
Пожалуйста, взгляните на следующий фрагмент:
вы можете привязать границу, например: :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>
Большое спасибо, это на самом деле почти идеально! Мне просто нужно иметь возможность выбирать более одной карты за раз, и они все равно будут зелеными.
@AdamBrashear, эй, приятель, посмотри еще раз, я обновил свой ответ
В коде, который я разместил, я не храню CSS в классе. Сначала я думал об этом, но подумал, что будет проще просто использовать вариант границы, который поставляется с b-картой. Тогда вы предлагаете создать код css? Если это так, мне все еще нужно какое-то руководство по доступу к правильной картотеке.