Vue.js 2.3 - Element UI 대화상자 - 동기 및 소품

Vue.js 2.3 - Element UI 대화상자 - 동기 및 소품

사용하고 있다vue-js 2.3그리고.element-ui업데이트 이후2.3의vue-js재도입sync상황이 바뀌었고, 나는 내 문제를 이해하는 데 어려움을 겪어왔다.

여기 jsfiddle이 있습니다.https://jsfiddle.net/7o5z7dc1/

문제

그dialog한 번만 열립니다.닫으면 다음 오류가 발생합니다.

상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "showDialog"

문의사항

내가 뭘 잘못하고 있지?

어떻게 하면 현재 상황을 해결할 수 있을까요?

편집

를 작성하는 경우data에러 메세지는 간신히 삭제했습니다만,dialog더 이상 닫히지 않습니다.

<div id="app">
      <left-panel v-on:show="showDialog = true">></left-panel>
      <popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
    </div>

    <template id="left-panel-template">
      <button @click="$emit('show')">Show Component PopUp</button>
    </template>


    <template id="popup">
        <el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">I am the popup</el-dialog>
    </template>


        Vue.component('left-panel', {
      template: '#left-panel-template',
      methods: {
      },
    });

    Vue.component('popup', {
      template: '#popup',
      props : ['showDialog'],
      methods: {
       updateShowDialog(isVisible) {
           if (isVisible) return false;
           this.$emit('update:showDialog', false )
       },
      },
    });

    var vm = new Vue({
      el: '#app',
      data: {
        showDialog: false,
      },
      methods: {

      }
    });

속성을 직접 변환하지 않고 프로포트의 복사본을 만들고 변환하여 변환 경고를 방지할 수 있습니다.

Vue.component('popup', {
  template: '#popup',
  props : ['showDialog'],
  data(){
    return {
        show: this.showDialog
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   },
  },
});

또한 당신의 템플릿을 변경해서visible-change올바르게 동작합니다.

<el-dialog :visible.sync="show" @visible-change="updateShowDialog">I am the popup</el-dialog>

바이올린 업데이트

언급URL : https://stackoverflow.com/questions/44273644/vue-js-2-3-element-ui-dialog-sync-and-props