Vue.js: 사용자가 버튼을 클릭했을 경우에만 컴포넌트를 로드합니다.

Vue.js: 사용자가 버튼을 클릭했을 경우에만 컴포넌트를 로드합니다.

아래 코드와 같은 코드를 가지고 있습니다.사용자가 데이터를 표시하기 위해 버튼을 클릭하지 않으면 컴포넌트 "dataPart1"과 "dataPart2"가 로드되지 않도록 설정하려면 어떻게 해야 합니까?즉, 데이터가 자동으로 표시되는 것이 아니라 사용자가 버튼 클릭 옵션을 통해 데이터를 표시하도록 선택한 경우에만 표시됩니다.

var app = new Vue({
  el: '#data',
  data: {
    show: true,
    something: true,
  },
  components: {
    dataPart1,
    dataPart2
  },
  ...other stuff...
  }
});

템플릿(텍스트, html, 컴포넌트 등)에 콘텐츠를 조건부로 표시하기 위해 Vue.js의 조건 렌더링을 사용할 수 있습니다.v-if지시.

간단한 설명: 컴포넌트에 정의된 특정 변수에 따라 콘텐츠를 표시할 수 있습니다.특정 이벤트(예: 버튼 클릭)에서 변수 값을 변경합니다.

CodeSandbox에서 버튼 클릭으로 2개의 컴포넌트를 조건부로 로드하는 예를 참조하십시오.

인App.vue파일, 클릭 시 핸들러를 트리거하는 2개의 버튼이 있으며 해당 값이 다음과 같은 경우 컴포넌트를 표시합니다.true.

언급URL : https://stackoverflow.com/questions/52999526/vue-js-only-load-component-if-user-clicks-button