Получить индекс в пределах v-для использования computed или метода - PullRequest
Новая
       10

Получить индекс в пределах v-для использования computed или метода

0 голосов
/ 22 мая 2018

Мне было интересно, возможно ли vue получить индекс массива объектов непосредственно внутри v-for in и передать это значение вычисляемому свойству или методу, подобному этому здесь, или даже вычисляемому свойству 

<div v-for="(object, index) in objects(index)"></div> 

methods: {
   objects(index){
    const categoryId = Object.keys(this.data);
    return this.data[categoryId[index]].extras;
   } 
}

Мне нужен индекс, так как мне удобнее возвращать правильное значение на основе определенного ключа, есть ли способ достичь этого?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вы можете связать вызов метода с каждым элементом, созданным директивой v-for , поэтому, например, каждый раз, когда пользователь нажимает на элемент <li>, он получает индекс этого выбранного элемента:

new Vue({
  el: '#app',
  data: {
    clickedIndex: null,
    weekDays: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday']
  },
  methods: {
    handleClick(i) {
      this.clickedIndex = i;
    }
  }
})

Vue.config.productionTip = false;
Vue.config.devtools = false;
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(day,i) in weekDays" v-on:click="handleClick(i)">{{day}}</li>
  </ul>
  <p>Index clicked {{ clickedIndex }}</p>
</div>
0 голосов
/ 22 мая 2018

Преобразование ваших данных с использованием вычисленного значения и цикл по нему.Я не уверен, как выглядит ваш this.data, но что-то вроде этого должно работать (настроить его под свои нужды): 

<div v-for="object in computed_objects"></div> 

computed: {
   computed_objects(){
    return Object.keys(this.data).map(categoryId => this.data[categoryId].extras)
   } 
}
...