템플릿 태그를 사용한 Vue 및 조건부 렌더링

템플릿 태그를 사용한 Vue 및 조건부 렌더링

다음 문서를 따르려고 합니다.

• https://vuejs.org/v2/guide/conditional.html

하지만 어떤 이유에서인지 템플릿이 예상대로 작동하지 않습니다.<template v-if="variable">vue가 아무것도 렌더링하지 못했습니다.

<script type="text/x-template" id="dashboard-inititial-message">

<template v-if="okBoom">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

<div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
<div v-else>
    <p>ELSE</p>
</div>
</script>

조언 좀 해주시겠어요?

문제를 나타내는 단편:

https://jsfiddle.net/o2tL2ems/1/

"vue.js에 대해 알아야 할 것이 있습니다,"라고 피터는 댓글에서 지적했다.템플릿은 루트 요소가 될 수 없으며 일반적으로 루트 태그는 하나만 사용할 수 있습니다.

따라서 다음과 같은 템플릿이 있는 경우:

<script type="text/x-template" id="dashboard-inititial-message-mk1">
    <div v-if="okBoom">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <h3>adas</h3>
    <div v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
</script>

기본적으로 vue.js에게 문제를 물어봅니다.Vue는 okBoom을 사용한 div가 종료되는 즉시 템플릿 해석을 중지합니다.

인터넷 곳곳에는 저와 비슷한 질문들이 있습니다.

• 템플릿 및 vue.js 루트 노드에서의 홀수성

한마디로 솔루션.템플릿을 master span, div 또는 transition으로 래핑합니다(단, 이것은 다소 해킹적인 것처럼 보이지만, 반면 불필요한 html 태그는 생성되지 않습니다).

로더에 조건부 템플릿 렌더링을 사용합니다(서버 요청이 발생하는 동안).

new Vue({
  el: "#app",
  template:
  `<div v-else class='somePage'>
       <template v-if="isLoading">
         <div>LOADING...</div>
       </template>
       <template v-else>
         <h1>title</h1>
         <p>The final rendered result will not include the "template" element.</p>
       </template>
    </div>`,
  data: () => ({
    isLoading: true
  }),
  mounted() {
    setTimeout(this.getData.bind(this), 1500);
  },
  methods: {
		async getData() {
      // await axios ...do some request...
      this.isLoading = false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

언급URL : https://stackoverflow.com/questions/42373918/vue-conditional-rendering-with-template-tag