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

Мне было интересно, возможно ли в 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;
   } 
}

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


methods vue.js computed-properties v-for
person Benny    schedule 21.05.2018    source источник
comment
использует методы вместо вычисляемых.   -  person Sphinx    schedule 22.05.2018
comment
нет. вычисляемые свойства не могут иметь параметров   -  person Stephen Thomas    schedule 22.05.2018

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

arrow_upward
0
arrow_downward

Вы можете привязать вызов метода к каждому элементу, созданному директивой 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/[email protected]/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>

person ricardoorellana    schedule 22.05.2018
comment
Я вижу, что я не слишком хорошо объяснил свой вариант использования, мне не нужно реализовывать способ нажатия на разные элементы, мне нужно было бы только передать индекс из каждого элемента в вычисляемое свойство или метод, чтобы вернуть правильное значение в массиве объектов - person Benny; 22.05.2018