Vue.js: 사용자가 버튼을 클릭했을 때 템플릿(또는 div)을 로드하시겠습니까?

Vue.js: 사용자가 버튼을 클릭했을 때 템플릿(또는 div)을 로드하시겠습니까?

그래서 현재 다음과 같은 ".vue" 파일에 템플릿이 있습니다.

<template>
  <div id="dataAttachToMe"></div>
</template>

사용자가 버튼을 클릭하지 않는 한 로드하지 않았으면 합니다.

<button @click="loadTheTemplateAbove">See Data</button>

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key 의 예를 사용해 보았습니다.그러나 오류 메시지에는 "컴포넌트 템플릿에 루트 요소가 정확히1개 포함되어 있어야 합니다"와 같은 메시지가 나타납니다.

여기에 표시/숨기기 이상의 것이 필요하다고 생각합니다.템플릿을 동적으로 기동할 수 있는 것이 필요합니다.

<template>
  <div id="data">
    <button @click="loadTemplate">Load the template</button>
    <div v-if="buttonClicked">
      <div id="dataAttachedToThisDiv"></div>
    </div>
  </div>
</template>

에러가 발생하고 있는 것은, 내부에 복수의 루트 요소가 있는 것을 의미합니다.<template></template>태그를 붙입니다.

Vue.js(및 기타 템플릿 기반 프레임워크/라이브러리)에서는 루트 요소를 하나만 사용해야 합니다.

이 조작은 동작하지 않습니다.

<template>
  <div id="dataAttachToMe"></div>
  <button @click="loadTheTemplateAbove">See Data</button>
</template>

이 조작은 유효합니다.

<template>
  <div id="someRootDiv">
    <div id="dataAttachToMe">Some data</div>
    <button @click="loadTheTemplateAbove">See Data</button>
  </div>
</template>

다음은 코드 예시입니다(App.vue달성하려고 하는 것 중 하나:

기본 아이디어: 변수를 만들어야 합니다.버튼을 클릭하면 변수가 변경됩니다.추가하다v-if해당 변수에 따라 달라지며 요소의 가시성을 처리하는 지시문입니다.

Stack Overflow에 오신 것을 환영합니다.에러가 발생했을 때Component template should contain exactly one root element즉, 루트 요소는 1개뿐입니다.template이 에러는, 모든 것을 공백으로 둘러싸서 해결할 수 있습니다.div그렇게

 <template>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
  </div>
</template>

투고를 편집하여 배치해 주세요.<script>태그. 조건부 렌더링을 위해서는 부울의 데이터 필드가 필요합니다.if템플릿의 스테이트먼트

<template>
 <div>
    <div v-if="show">{{message}}</div>
    <div v-if="@show">Not Showing when show is set to false</div>
     <button v-on:click="show = true">Show</button>
 </div>
</template>
<script>
module.exports {
  data: function () {
    message: 'Hello Vue!',
    show: false
  }
}
</script>

언급URL : https://stackoverflow.com/questions/52998125/vue-js-loading-template-or-div-when-user-clicks-button