Vue.js: 자 컴포넌트 상태에 따라 부모 컴포넌트 버튼 비활성화

Vue.js: 자 컴포넌트 상태에 따라 부모 컴포넌트 버튼 비활성화

나는 부모와 자녀의 의사소통에 관한 문서를 읽었다.자녀가 이벤트를 발생시킴으로써 부모에게 소통하고 부모 구성요소가 자녀 구성요소로 소품을 물려주는 것을 이해합니다.

이 원칙을 프로젝트에 적용하는 데 어려움을 겪고 있습니다.

나는 가지고 있다Survey여러 페이지를 포함하는 구성 요소.vSwipe를 사용하여 페이지 슬라이더를 구현하고 있습니다(각각 https://github.com/wangdahoo/vswipe)).<swipe-item>를 포함합니다.QuestionGroup여러 개의 컴포넌트를 포함하는 컴포넌트Questions.

이러한 질문 중 일부는 필수입니다.

vSwipe 다음 버튼과 이전 버튼(부모에 포함)을 비활성화/활성화하려면 어떻게 해야 합니까?Survey컴포넌트)의 상태를 기반으로 합니다.questions현재 표시된 대로QuestionGroup컴포넌트?

조금 아플 수도 있어요.좀 더 우아한 패턴을 위해 VueX를 사용하는 것이 좋습니다.

그나저나, 당신은 질문에서 모든 것을 말했습니다.이벤트를 사용하여 자녀 간에 커뮤니케이션할 수 있습니다.

한 가지 방법은 다음과 같습니다.

Vue.component('Question', {
  template: `<div>
        {{ name }}:
        <input type="text" 
          @input="toogleFilled($event.target.value)">
        </input>
    </div>`,
  props: ['name'],
  methods: {
    toogleFilled(inputValue) {
      // Emit name of the component and true if input is filled...
      this.$emit('filled', this.name, !!inputValue.length);
    }
  }
});

Vue.component('QuestionGroup', {
  template: `<div>
        <template v-for="(q, key) in questions">
          <question :name="key" @filled="toogleReady">
          </question>
        </template>
    </div>`,
  data() {
    return {
      // Each key will be the name of the question 
      // Each value will be if it's filled or not
      questions: {
        'Question1': false,
        'Question2': false
      }
    };
  },
  methods: {
    toogleReady(name, filled) {
      this.questions[name] = filled;

      // Check if each question is filled, if yes, emit true
      if (filled && Object.values(this.questions).every(q => q)) {
        this.$emit('readyToSwipe', true);
      } else {
        this.$emit('readyToSwipe', false);
      }
    }
  }
});

Vue.component('Survey', {
  template: `<div>
    	<button :disabled="isDisabled">I'm doing nothing</button>
        <question-group @readyToSwipe="toogleDisabled"></question-group>
    </div>`,
  data() {
    return {
      isDisabled: true
    };
  },
  methods: {
    toogleDisabled(ready) {
      // Disable the button if the question-group is not ready
      this.isDisabled = !ready;
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app">
  <survey></survey>
</div>

언급URL : https://stackoverflow.com/questions/44526817/vue-js-disabling-a-button-on-parent-component-based-on-state-of-child-component