Vue: отличный метод в компоненте foreach - PullRequest
Новая
       5

Vue: отличный метод в компоненте foreach

0 голосов
/ 25 сентября 2019

У меня есть дочерний компонент в цикле foreach.У компонента есть два метода, которые я инициирую с помощью кнопки на компоненте.

Как я могу сделать эти методы уникальными / для каждой итерации foreach?Потому что, если я не выделю их, даже если я нажму кнопку последней итерации, запустится метод первой итерации.

Я пробовал с methodName+index: function(), но получил ошибку , expected.

Обновление

Мой родительский компонент: 

            <div v-for="(card, index) in cards" v-bind:key="index">
                <CardSubComponent 
                    :card="card"
                    @cardSaveSuccess="cardSuccess"
                    @cardSaveError="cardError"
                ></CardSubComponent>
            </div>

Мой подкомпонент: 

<template>
    <div class="box">
        <b-select :id="cardSequenceID" v-model="card.sequence" @input="changeSequence">
            <option
                v-for="sequence in sequenceArray"
                :value="sequence"
                :key="sequence">
                {{ sequence }}
            </option>
        </b-select>
    </div>
</template>
<script>


    export default {
        props:['card'],
        data(){
            return {
                cardSequenceID = 'sequence'+card.id
                sequenceArray: [1,2,3,4,5,6,7,8,9,10],
            }
        },
        methods: {
            changeSequence(rule){
                axios.post('/api/card/changeSequence', {
                    cardID: card.id,
                    weight: document.getElementById('sequence'+cardID).value
                },
                {
                    headers: {
                        Authorization: 'Bearer ' + localStorage.getItem('token')
                    }
                }).then(response => {
                    if(response.data == 'success'){
                        this.$emit('cardSaveSuccess')
                    } else {
                        this.$emit('cardSaveError')
                    }
                });
            }
        }
    }
</script>

1 Ответ

0 голосов
/ 25 сентября 2019

Похоже, вам нужно добавить аргументы к вызовам вашего метода.Примерно так: 

<template>
  <div>
    <CardSubComponent
      v-for="(card, index) in cards"
      :key="index"
      :card="card"
      @cardSaveError="cardError(card)"
      @cardSaveSuccess="cardSuccess(card)"
    />
  </div>
</template>

export default {
  methods: {
    cardError(card) {
      // TODO: Add error handler here
      console.log('error called with:', card.id);
    },
    cardSuccess(card) {
      // TODO: Add success handler here
      console.log('success called with:', card.id);
    },
  },
};

В дочернем компоненте есть две неправильные вещи:

  1. cardSequenceID не было правильно инициализировано (вместо этого вы использовали =из :)
  2. Вы пропустили this в this.card.id, чтобы определить идентификатор вашего axios звонка 
export default {
  props: ['card'],
  data() {
    return {
      sequenceArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      cardSequenceID: `sequence${card.id}`,
    };
  },
  methods: {
    changeSequence(rule) {
      axios
        .post(
          '/api/card/changeSequence',
          {
            cardID: this.card.id,
            weight: document.getElementById(`sequence${cardID}`).value,
          },
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem('token')}`,
            },
          }
        )
        .then(response => {
          if (response.data === 'success') {
            this.$emit('cardSaveSuccess');
          } else {
            this.$emit('cardSaveError');
          }
        });
    },
  },
};
...