在v-for中單擊時如何更改所選BootstrapVue卡的邊框變體

我的b-card顯示v-for和功能大部分都按需要進行，我遇到的一個問題是更改所選卡片的邊框變體。到目前為止，我已經嘗試將卡片內的 v-for 嵌套在div容器中，然后使用 av-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 并沒有看到與我的情況類似的示例，我將再次重申。我想單擊加號按鈕并更改所選卡片的邊框變體。

uj5u.com熱心網友回復：

請看下面的代碼片段：你可以像: 一樣系結邊框: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>

uj5u.com熱心網友回復：

首先，不要僅將 v-if 和 v-else 用于類名，而是使用以下內容

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

第一個值必須是真值。以下是將根據值應用的類名稱。

標籤：javascript Vue.js Vuejs2 引导程序

上一篇：當前處于活動狀態時，在@clickon按鈕上添加活動類-組合API

下一篇：VuetifyTable-過濾掉特定行