Vuejs 2.3 - 동기화 및 요소 Ui 대화상자

Vuejs 2.3 - 동기화 및 요소 Ui 대화상자

사용하고 있다.Element UI그리고 석방된 이후 상황이 달라졌다.Vue.js 2.3

나는 a를 가지고 있다.dialog다음 조건을 만족하는 경우에만 표시되어야 함private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

새 속성을 사용하려고 하는데visible.sync 문서화

조건이 하나의 조건만 포함하고 여러 조건과 함께 작동하지 않는 경우 작동하고 있다.

일하는 중

<el-dialog
       :visible.sync="private.pendingDialogVisible"                 
</el-dialog>

작동하지 않음

<el-dialog
       :visible.sync="private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible"           
    </el-dialog>

1. 다음 중 무엇을 사용하는가?el-dialog와 함께visible.sync몇 가지 조건으로?
2. 만약 이것이 불가능하다면 나는 그것을 작동시키기 위해 무엇을 해야 하는가?

그 문제는 무엇에 대한 오해에서 비롯되었다.sync실제로 하고 있다.

Vue 2.3(Vue 1x와 달리),sync양방향 바인딩을 용이하게 하기 위한 이벤트 등록에 지나지 않는다.설명서에 따라:

2.3에서는 소품용 .sync 수식어를 다시 도입했지만, 이번에는 추가 v-on listener로 자동 확장되는 구문 설탕에 불과하다.다음

<comp :foo.sync="bar"></comp>

다음 항목으로 확장됨:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

비전문가의 말로 이것은 무엇을 의미하는가?동기화 중인 값을 업데이트하기 위해 양방향 바인딩을 용이하게 하기 때문에 여러 속성을 사용할 수 없으며(부울 표현식) 동일한 값에서 읽고 쓸 수 있으므로 메서드의 반환 값을 사용할 수도 없다.

요컨대, 아니, 당신은 다음을 사용하여 성취할 수 없다.sync당신이 현재 그것을 사용하고 있는 방식에서 그리고 나는 개인적으로 도서관이 선택한 구현에 동의하지 않는다. 왜냐하면 그것은 특별히 명확하지 않고 복잡한 해결책들을 강요하기 때문이다.

즉, 단 하나의 속성을 사용하여 의 가시성을 구속할 수 있다.:visible.sync다음 예에서 상태를 기준으로 트리거할 수 있다.

템플릿:

<div id="app">
  <el-dialog title="Shipping address" :visible.sync="showDialog" 
    :before-close="beforeCloseHandler"
    @close="cond1 = true; cond2 = false;">
  </el-dialog>
  <button @click="cond1 = true; cond2 = false; showDialog = true;">Open Dialog</button>
</div>

자바스크립트:

var Main = {
    data() {
      return {
        showDialog: true,
        cond1: true,
        cond2: true,
      };
    },
    methods: {
      beforeCloseHandler: function (done) {
        if (this.cond1 && this.cond2) {
            console.log('hit close');
            done();
        } else {
            console.log('rejected close');
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

디스플레이를 하나의 자산에 묶을 수 있고, 해제를 제어하는 것도:before-close핸들러 그리고 물론 우리는 버튼 클릭 이벤트를 통해 우리의 쇼 조건을 조절할 수 있다.그것은 완벽하지는 않지만 잠재적인 해결책이다.

참조URL: https://stackoverflow.com/questions/43883320/vuejs-2-3-sync-and-element-ui-dialog