Vue 在循環中單擊的項目上添加類並從其他項目中刪除

Question

我有一個循環，我循環遍歷一個數組。

對於這個數組中的每個項目，我渲染一個新組件。 現在，當用戶單擊某個組件時，我只想向該組件添加一個類以突出顯示它並將其從其他擁有它的組件中刪除。 將其視為菜單活​​動項。

<step-icon
  v-for="(step, currentStep) in steps"
/>

data() {
  return {
    steps: [{foo: 'bar'}, {foo2: 'bar2'}]
  }
}

我的 step-icon.vue：

<template>
  <div :class="{'selected': selected}" @click="clickStep()">
    hello
  </div>
</template>

data() {
  return {
    selected: false
  }
},
methods: {
  clickStep() {
      this.selected = true;
  }
}

這只有一種方式，我只能添加選定的類，但永遠不會刪除它。

Answer 1

我創建了一個簡單的例子來說明你的用例，因為你沒有提供足夠的細節來說明。 您可以在下方找到選中和未選中的項目。 首先，我們添加了一個鍵isSelected並將其設置為 false 作為默認值。 這將作為所有項目的狀態。

steps: [
  {key:"0", tec:"foo", isSelected:false},
  {key:"1", tec:"bar", isSelected:false},
  {key:"2", tec:"foo2", isSelected:false},
  {key:"3", tec:"bar2", isSelected:false},
]

接下來，我們遍歷數組並顯示所有項目。

  <ul>
    <li 
        v-for="l in steps" 
        id="l.key"
        @click="select(l.key, l.isSelected)"
        v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }"
        > {{ l.tec }} </li>
   <ul>

在這里你可以看到我們在 v-bind 指令上設置了我們的狀態屬性isSelected ，它將根據isSelected的值添加或刪除類。

接下來，一旦項目被點擊，我們將觸發select方法。

  methods: {
    select(key) {
      for (let i = 0; i < this.steps.length; i++) {
        if (this.steps[i].key !== key) {
          this.steps[i].isSelected = false
        }
      }

      this.toggleSelection(key)
    },
    toggleSelection(key) {
      const stepsItem = this.steps.find(item => item.key === key)
      if (stepsItem) {
        stepsItem.isSelected = !stepsItem.isSelected
      }
    }
  }

select 方法將首先取消選擇除已選擇的以外的所有項目，然后調用toggleSelection將所選項目設置為 true 或 false。

完整代碼：

 new Vue({ el: '#app', data: { steps: [ {key:"0", tec:"foo", isSelected:false}, {key:"1", tec:"bar", isSelected:false}, {key:"2", tec:"foo2", isSelected:false}, {key:"3", tec:"bar2", isSelected:false}, ] }, methods: { select(key) { for (let i = 0; i < this.steps.length; i++) { if (this.steps[i].key !== key) { this.steps[i].isSelected = false } } this.toggleSelection(key) }, toggleSelection(key) { const stepsItem = this.steps.find(item => item.key === key) if (stepsItem) { stepsItem.isSelected = !stepsItem.isSelected } } } })

 .selected { background: grey; } .notselected { background:transparent; }

 <script src="https://unpkg.com/vue@2.6.10"></script> <div id="app"> <ul> <li v-for="l in steps" id="l.key" @click="select(l.key, l.isSelected)" v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }" > {{ l.tec }} </li> <ul> </div>

Answer 2

您可以將所有step狀態保留在父組件中。

現在父組件可以從嵌套的事件中監聽toggle_selected事件，並以當前步驟作為參數調用toggle_selected(step) 。

Toggle_selected方法應該取消選擇除當前步驟之外的所有步驟，並且對於當前步驟只需切換selected道具。

如果您想修改嵌套組件中步驟的更多道具，您可以在嵌套組件中使用.sync修飾符（ :step.sync="step" ），然后使用this.@emit('update:step', newStepState) .

我還做了一個片段（我的第一個）。 在這個例子中，我省略了clickStep ，只是把@click="$emit('toggle_selected')放在step-icon組件中。

 new Vue({ el: '#app', // for this example only defined component here components: { 'step-icon': { props: { step: Object } } }, data: { steps: [ { name: 'Alfa', selected: false}, { name: 'Beta', selected: false}, { name: 'Gamma', selected: false}, ] }, methods: { toggle_selected(step) { this.steps.filter(s => s != step).forEach(s => s.selected = false); step.selected = true; } } })

 #app { padding: 2rem; font-family: sans-serif; } .step-icon { border: 1px solid #ddd; margin-bottom: -1px; padding: 0.25rem 0.5rem; cursor: pointer; } .step-icon.selected { background: #07c; color: #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <!-- Ive used inline-template for this example only --> <div id="app"> <step-icon v-for="(step, currentStep) in steps" :key="currentStep" :step.sync="step" @toggle_selected="toggle_selected(step)" inline-template> <div class="step-icon" :class="{selected: step.selected}" @click="$emit('toggle_selected')"> {{ step.name }} </div> </step-icon> </div>