Vue.js v-for 루프에서 이벤트 처리 동적 생성 버튼

Vue.js v-for 루프에서 이벤트 처리 동적 생성 버튼

각 반복마다 버튼이 생성되는 v-for 루프가 있습니다.버튼을 클릭하면 버튼의 색상이 바뀌는 전환 핸들러를 만들려고 합니다.단, 버튼이 동적으로 생성되기 때문에 모든 색상이 변화하고 있습니다.

<div class="pets" v-for="pet in pets" :key="pet.id">
    <button class="favorite" v-on:click="toggle">
        <i v-bind:class="[{ 'red' : favorited }, 'material-icons']">favorite</i>
    </button>           
</div>

애완동물 어레이가 http 콜로 채워지고 있습니다.스크립트는 다음과 같습니다.

<script>
export default {
    name: 'home',
    data() {
        return {
            pets: [],
            favorited: false
        }
    },
    methods: {
        toggle: function() {
            this.favorited = !this.favorited;
        }
    },
}

스타일 태그는 색상만 변경합니다.

<style scoped>
.red {
    color: red;
}

기본적으로 어레이 애완동물에서 오브젝트 설정을 전환할 수 있는 즐겨찾기 버튼을 만들려고 합니다.왜 내 방식이 모든 버튼을 활성화하는지 알고 있습니다.선호하는 것은 버튼에만 있는 것이 아니라 데이터에서 나오는 것이기 때문입니다.따라서 = true를 선택하면 모든 버튼에 '빨간색' 클래스가 바인딩됩니다.질문입니다.클래스 '빨간색'을 클릭하는 버튼에만 바인딩하려면 어떻게 해야 합니까?저는 Vue에 비교적 처음이라서 미치겠어요(웃음).누가 이걸 어떻게 고칠 수 있는지 알려주세요.

애완동물 배열의 애완동물 개체에 즐겨찾기 속성을 추가합니다.그럼 그 속성을 사용하세요.

<div class="pets" v-for="pet in pets" :key="pet.id">
    <button class="favorite" v-on:click="pet.favorited = !pet.favorited">
        <i v-bind:class="[{ 'red' : pet.favorited }, 'material-icons']">favorite</i>
    </button>           
</div>

예.

반려동물을 수정하지 않으려는 경우 다른 방법이 있습니다.

언급URL : https://stackoverflow.com/questions/43956662/event-handling-dynamic-created-buttons-in-vue-js-v-for-loop