Как изменить вариант границы выбранной карты Bootstrap Vue при нажатии в 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 находится в моих данных(), и у меня есть функция, которую мы будем вызывать 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 и не видел примера, похожего на мою ситуацию, которую я повторю снова. Я хотел бы нажать кнопку «плюс» и изменить вариант границы выбранной карты.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Во-первых, вместо использования v-if и v-else только для имени класса используйте следующее

:class = " selected ? 'className1' : 'className2' "

Первое значение должно быть истинным значением. Ниже приведены имена классов, которые будут применяться в зависимости от значения.

В коде, который я разместил, я не храню CSS в классе. Сначала я думал об этом, но подумал, что будет проще просто использовать вариант границы, который поставляется с b-картой. Тогда вы предлагаете создать код css? Если это так, мне все еще нужно какое-то руководство по доступу к правильной картотеке.

AdamBrashear 07.04.2022 23:04

вы можете сделать то же самое с вашим вариантом границы. так что в вашем случае это будет :border-variant = "selected ? 'success' : 'danger'". Это должно работать без каких-либо дополнительных операторов if или else или дополнительных классов.

AZAF 07.04.2022 23:13

Я вижу, что вы там собирались, спасибо за помощь.

AdamBrashear 07.04.2022 23:41
Ответ принят как подходящий

Пожалуйста, взгляните на следующий фрагмент: вы можете привязать границу, например: :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 07.04.2022 23:23

@AdamBrashear, эй, приятель, посмотри еще раз, я обновил свой ответ

Nikola Pavicevic 07.04.2022 23:28

Другие вопросы по теме