동적으로 생성된 형제에게 데이터 전달

동적으로 생성된 형제에게 데이터 전달

저는 제가 생각하는 단순한 질문에 대한 답을 얻으려고 노력하지만 성공하지 못하고 있습니다.저는 Vue에 처음 왔어요.

설명:
웹 사이트의 "점 탐색" 사용 사례를 살펴보겠습니다.이것은 v-for loop 4 "도트" 구성요소(DotNaviElem)로 렌더링되는 구성요소(DotSideNavi)가 됩니다.

액션:
점 하나를 클릭하면

1. 다른 모든 것을 비활성화해야 합니다(액티브클래스 삭제).
2. 클릭 후 즉시 활성화해야 합니다.

시행 및 실패:

1. 를 사용해 보았습니다.$emit그리고.$on둘 다 '도트' 엘에 있기 때문에 '도트' 하나를 클릭하면 이벤트가 4개의 '도트' 모두에 전달될 것으로 예상했습니다.대신 동일한 "dot" el에 대해서만 이벤트가 4번 트리거되었습니다.

2. Vuex: 동일한 로직을 구현하려고 했지만 다시 클릭된 "dot"에 대해서만 상태가 변경되었습니다.

3. 자녀-부모-자녀 간에 데이터를 주고받는 것은 잘못된 관행으로 간주됩니다.
4. 각 점을 식별하여 비활성화하는 것은 이 문제를 해결하는 잘못된 방법인 것 같습니다.
5. 제가 읽은 바로는slots관련성이 없는 것 같습니다.

코드(간소):

<!-- Side Dot Navi -->
<template>
    <div class="dot-side-nav">
        <dot-navi-elem v-for="(n, index) in 4"
                       v-bind:key="index"
                       v-bind:class="{ 'active': index === 0 }" <!-- just dummy init for activating first dot -->
        />
    </div>
</template>

<script>
    import DotNaviElem from '~/atoms/DotNaviElem.vue';

    export default {
        components: {
            DotNaviElem
        }
    };
</script>

<!-- Dot Navi Element used for Side Dot Navi -->
<template>
    <span class="dot-wrapper "
          v-bind:class="{ active: isCurrentSlide}"
          v-on:click="activateDotNaviElem()"
    >
      <span class="dot"></span>
    </span>
</template>

<script>
    export default {
        data() {
            return {
                isCurrentSlide: false
            };
        },

        methods: {
            activateDotNaviElem() {
                this.isCurrentSlide = !this.isCurrentSlide;
            }
        }
    };
</script>

요건:
다른 외부 라이브러리는 허용되지 않습니다.

프레임워크:
Nuxt, Vue, Vuex

질문:
누가 이걸 코드화하고 적절한 자원을 찾아내는 "vue" 방법이 뭔지 설명해 줄 수 있나요?이건 지금 보이는 것보다 더 간단해야 해.

보너스:
1. 및 2. (Try and Fail)이 모든 "dot" 컴포넌트에 대해 이벤트/상태 변경을 트리거하지 않는 이유에 대해 간단히 설명해 주시면 감사하겠습니다.

저장소
다음 저장소에서 이 예제의 프로젝트를 찾을 수 있습니다.
https://github.com/stavros-liaskos/nuxt-fun
관련 파일:
컴포넌트/DotSideNavi.vue(내비게이션)
atoms/DotNaviElem.vue(도트 요소)

시작하자.

https://jsfiddle.net/Critycal/rn4mL0n4/

처음 이벤트를 실행한 것이 정답입니다.

VueJS 문서의 이벤트 섹션을 참조하십시오.

Vue.component('dot-navigation', {
	data() {
  	return {
    	index: 0
    }
  },
  template: '<div><p>{{ index }}</p><dot-navigation-element v-for="(n, index) in 4" v-bind:key="index" v-on:test="setActive" :index="n" /></div>' ,
  methods: {
  	setActive(index) {
    	console.log("sdf")
    	this.index = index
    }
  }
});

Vue.component('dot-navigation-element', {
	props: ['index'],
  template: '<span v-on:click="activate">dot</span>',
  methods: {
  	activate() {
    	console.log("activate");
    	this.$emit('test', this.index)
    }
  }
  
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});

<div id="app">
  <dot-navigation></dot-navigation>
</div>

업데이트된 JSFiddle 여기에 링크 설명 입력

언급URL : https://stackoverflow.com/questions/49451899/passing-data-to-dynamicaly-created-siblings