Разделение начального и конечного тегов для условного рендеринга - PullRequest
Новая
       11

Разделение начального и конечного тегов для условного рендеринга

0 голосов
/ 22 ноября 2018 
<template>
    <div>
        <template v-if="isFieldsetElement">
            <fieldset>
                <legend>Label Here</legend>
        </template>
        <template v-else>
            <label>Label Here</label>
        </template>

        <span> Description </span>
        <img src="image.png" />
        <div>more stuff here </div>

        <template v-if="isFieldsetElement">
            </fieldset>
        </template>
    </div>
</template>

Я не могу сделать это разделение тегов.В основном у меня есть отдельные header и footer (из-за отсутствия лучшего слова), но я не могу сделать это в Vue, как это возможно в серверной разметке.

Есть ли обходное решение или более элегантное решение для этой проблемы?

Ответы [ 3 ]

0 голосов
/ 22 ноября 2018

Выходными данными для PHP является строка, поэтому вы можете установить ее как '' + 'hello' + '', но для платформы JS они использовали HTMLElement, поэтому вы не можете сделать то же самое здесь.Я думаю, что вам нужно привыкнуть к использованию компонента, а также PHP.Пример: 

<?php
class View() {
   public $header; public $footer; public $content;
}
$view = new View(); $view->header = 'Hello';...
?>
<html>
  <body>
     <header>
       <?php echo $view->header?>
     </header>
     <div id="root">
       <?php echo $view->content?>
     </div>
     <footer>
       <?php echo $view->footer?>
     </footer>
  </body>
</html>

Для указанного выше источника заголовок, нижний колонтитул, содержимое означают один компонент, а содержимое обычно имеет много дочерних компонентов.

Итак, разделение тегов никогда не является хорошим решением, включая шаблон PHP. 

<template>
    <div>
        <template v-if="isFieldsetElement">
            <fieldset>
                <legend>Label Here</legend>
                <span> Description </span>
                <img src="image.png" />
                <div>more stuff here </div>
            </fieldset>
        </template>
        <template v-else>
            <label>Label Here</label>
            <span> Description </span>
            <img src="image.png" />
            <div>more stuff here </div>
        </template>
    </div>
</template>

или другой способ, аналогичный тому, который вы сделали в php: 

var app = new Vue({data:{html:'<div>Hello</div>'}});
<template v-html="html"></template>
0 голосов
/ 22 ноября 2018

Использование Динамические компоненты : 

<component :is="isFieldsetElement ? 'fieldset' : 'div'">
    <component :is="isFieldsetElement ? 'legend' : 'label'">
        <span> Description </span>
        <img src="image.png" />
        <div>more stuff here </div>
    </component>
</component>
0 голосов
/ 22 ноября 2018

Я не могу сделать это разделение тегов

Это верно, потому что Vue работает с полной моделью документа, поэтому вы не можете собрать элементы по частям

I 'Пойти с пользовательским компонентом упаковки.Что-то вроде ... 

<template>
  <div> <!-- single root element required -->
    <fieldset v-if="wrap">
      <legend>{{ label }}</legend>
      <slot></slot>
    </fieldset>
    <template v-else>
      <label>{{ label }}</label>
      <slot></slot>
    </template>
  </div>
</tenmplate>

<script>
export default {
  name: 'FieldWrapper',
  props: {
    wrap: Boolean,
    label: String
  }
}
</script>

и используйте его как 

<FieldWrapper :wrap="isFieldsetElement" label="Label Here">
  <span> Description </span>
  <img src="image.png" />
  <div>more stuff here </div>
</FieldWrapper>

В компоненте есть небольшое повторение <slot>, но для вашего случая использования, я бы сказалэто приемлемо.

JSFiddle Demo

...