Vue 클로징 구성 요소 반환 시 프로펠러가 직접 변질되지 않도록 주의

Vue 클로징 구성 요소 반환 시 프로펠러가 직접 변질되지 않도록 주의

나는 다른 페이지에 사용하고 싶은 구성요소가 있다.음, 첫 번째 토글까지는 잘 작동하고 있어.이전처럼 표시되지만 '닫기' 버튼을 클릭하면 닫히지만 콘솔 출력:

[부유 경고]:상위 구성 요소를 다시 렌더링할 때마다 값을 덮어쓰므로 프로펠러를 직접 변경하지 마십시오.대신, 프로펠러 값에 기반한 데이터 또는 계산된 속성을 사용하십시오.변형 중인 소품: "보이는"

에서 발견되다.

--> src/구성원/스낵바에서.src/views/Login에서 vue.부에를 하다

그리고 그 후에는 클릭에 나타나지 않는다.

이걸 고칠 방법은?

스낵바.부에를 하다

<template>
  <v-snackbar v-model.sync="visible" :timeout="5000" bottom>
    {{ content }}
    <v-btn flat color="primary" @click.native="visible = false">Close</v-btn>
  </v-snackbar>
</template>

<script>
  export default {
    name: 'snackbar',
    props: [
      'visible',
      'content'
    ]
  }
</script>

로그인.vue

<template>
  <div class="login">
    <Snackbar :visible="snackbar.visible" :content="snackbar.content"></Snackbar>
  </div>
</template>

<script>
  import Snackbar from '@/components/Snackbar.vue'
  export default {
    components: {
      Snackbar
    },
    data: function() {
      return {
        email: '',
        password: '',
        snackbar: {
          visible: false,
          content: ''
        }
      }
    },
    methods: {
      login: function() {
        if (this.email != '' && this.password != '') {
          // Do something
        } else {
          this.snackbar.content = 'Fields can\'t be empty';
          this.snackbar.visible = true;
        }
      }
    }
  }
</script>

다음과 같은 이유로 콘솔 오류가 트리거되는 경우:

@click.native="visible = false"

구성 요소가 들어오는 받침대를 직접 변이하고 있다.상위 구성요소가 가시성을 제어하는 곳에 이 수준의 제어를 유지하려면 클릭 이벤트가 이벤트를 내보내도록 하여 상위 구성요소가 수신하여 설정하십시오.this.snackbar.visible = false따라서 프로펠러 변경을 트리거하고 하위 구성요소가 숨겨진다.

<Snackbar :visible="snackbar.visible" :content="snackbar.content" 
     v-on:requestClose="close"></Snackbar>

<v-btn flat color="primary" @click.native="$emit('requestClose')">Close</v-btn>



methods: {
 close: function() {
   this.snackbar.visible = false;
 }
}

참조URL: https://stackoverflow.com/questions/50890394/vue-closing-component-returns-avoid-mutating-a-prop-directly