Применить стили к конкретному элементу v-for - PullRequest
Новая
       21

Применить стили к конкретному элементу v-for

0 голосов
/ 26 февраля 2019

Я делаю простое приложение со списком задач и задаюсь вопросом, как применять стили только к только определенным динамическим v-for элементам. 

<f7-list-item v-for="(listItem, index) in activeList.listItems" :key="index" :class="(checked) ? 'checked':'not-checked'">
 {{ index+1 }}. {{ listItem }}
  <span @click="checkTaskDone(index)">
    <i class="f7-icons" id="check-task-btn">check_round</i>
  </span>
</f7-list-item>

export default {
 data() {
  return {
   checked: false
  }
 },
 methods: {
  checkTaskDone(item) {
   if (this.checked == false) {
    this.checked = true;
   } else if (this.checked == true) {
    this.checked = false;
   }
  }
 }
}

.checked {
 text-decoration: line-through;
 color: #444;
}

С помощью этого кода он добавляет класс к каждому элементу списка v-for независимо от того, какой из них был нажат, как и ожидалось.Мне интересно, каков наилучший подход к решению этой проблемы.Я экспериментировал с созданием опоры из index и пытался нацелиться на нее, чтобы применить стили, но я не мог заставить ее работать.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Сначала вам нужно создать динамический проверенный массив в соответствии с длиной activeList.listItems!Затем вы можете проверить с индексом и вы можете обновить данные массива на this.$set(array,index,value) ... 

new Vue({
 el: "#app",
 data: {
   checked: [],
   activeList : {listItems:[1,2,3,5]}
 },
 created: function() {
   for(var i = 0; i < this.activeList.listItems.length; i++) {
     this.checked.push(false);
   }
 },
 methods: {
  checkTaskDone(item) {
   if (this.checked[item] == false) {
    this.$set(this.checked,item, true);
   } else if (this.checked[item] == true) {
    this.$set(this.checked,item, false);
   }
  }
 }
 });
.checked {
 text-decoration: line-through;
 color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(listItem, index) in activeList.listItems" :key="index" :class="{checked: checked[index]}">
 {{ index+1 }}. {{ listItem }}
  <span @click="checkTaskDone(index)">
    <i class="f7-icons" id="check-task-btn">check_round</i>
  </span>
</div>

</div>
0 голосов
/ 26 февраля 2019

Как правило, вы хотите иметь флаг «выполнено» или «проверено» на отдельных элементах дел, что-то вроде: 

const todoList = [
  {
    name: 'Grab some food',
    done: false
  },
  {
    name: 'Start coding',
    done: false
  }
];

А в Vue.js вы можете сделать переключение класса сv-bind:class, а не троичный оператор: 

export default {
  data() {
    return {
      //checked: false,

      activeList: {
        listItems: [
          {
            name: 'Grab some food',
            done: false
          },
          {
            name: 'Start coding',
            done: false
          }
        ]  
      }
    }
  },
  methods: {
    checkTaskDone(item) {
      //if (this.checked == false) {
      //  this.checked = true;
      //} 
      //else if (this.checked == true) {
      //  this.checked = false;
      //}

      // Check/uncheck
      item.done = !item.done;
    }
  }
}

<f7-list-item 
  v-for="(listItem, index) in activeList.listItems" 
  :key="index"
  :class="{ 'checked': listItem.done }">

 {{ index + 1 }}. {{ listItem }}

  <span @click="checkTaskDone(listItem)">
    <i class="f7-icons" :id="`check-task-btn${index}`">check_round</i>
  </span>
</f7-list-item>

Кстати, я добавляю индекс для отдельных элементов i.f7-icons, поскольку идентификатор должен быть уникальным, в противном случае используйтеclass вместо.

...