Multiple nested template, can not be rendered in ios

[ruohuan]

Issues, such as shown in the title
An example：

<template lang="jade">
.select-package
  dl(v-repeat="items")
    template(v-if="groupName=='1个号码套餐'")
      template(v-if="isFirstMonth")
        dt {{groupName}}
        dd(v-repeat="item" v-on="click:onChoose(itemId,skuId,isFirstMonth)")
          span {{skuName}}
      template(v-if="!isFirstMonth")
        dt {{groupName}}
        dd(v-repeat="item" v-on="click:onChoose(itemId,skuId,isFirstMonth)" v-show="skuId!=='0'")
          span {{skuName}}
</template>

For example shown，template(v-if="isFirstMonth") and template(v-if="!isFirstMonth") inside the content will not be rendered in ios, but Android is ok.

[JellyBool]

use english（还是使用英文吧）

codes should place like this

.select-package
dl(v-repeat="items")
template(v-if="groupName=='1个号码套餐'")
template(v-if="isFirstMonth")
dt {{groupName}}
dd(v-repeat="item" v-on="click:onChoose(itemId,skuId,isFirstMonth)")
span {{skuName}}
template(v-if="!isFirstMonth")
dt {{groupName}}
dd(v-repeat="item" v-on="click:onChoose(itemId,skuId,isFirstMonth)" v-show="skuId!=='0'")
span {{skuName}}

[yyx990803]

Are you using the latest version? (0.12.9)
There was a fix in 0.12.9 that is related to nested templates in Safari.

If this still happens in 0.12.9, please provide a jsfiddle reproduction.

[fychinesepjj126]

Can Vue.js provide a new directive like v-else , worked with v-if?
Maybe, it will be:

1. more concise syntax (use v-else, instead of v-if="!isFirstMonth")
2. easy to use (use the scene more)

[ruohuan]

Here is a demo: https://jsfiddle.net/kzxu9ceq/

[Pandahisham]

+1 with v-else , maybe a v-empty also , since when composing views these three conditions are most common , 1. there's nothing to show , 2. there's something to show , 3. there's something but it's different / needs adjusting

This is happening to me when try to create and alternate grid like:

+---+---+
| a | b |
+---+---+
| b | a |
+---+---+
| a | b |
+---+---+

Using the v-if with $index:

  <div class="container-fluid">
    <div class="row equal hidden-xs hidden-sm debug" v-for="service in services">
      <!-- Left -->
      <div class="col-md-6 service-text left debug" style="background-color: [[service.background]];" v-if="($index%2) === 0">
        <h3 class="font-white">[[service.title]]</h3><p class="font-family-lato font-white">[[service.body]]</p>
      </div>
      <div class="col-md-6 service-banner debug" v-bind:style="{'background-image': 'url('+service.banner.img+')'}" v-else></div>
      <!-- Right -->
      <div class="col-md-6 service-banner debug" v-bind:style="{'background-image': 'url('+service.banner.img+')'}" v-if="($index%2) === 0"></div>
      <div class="col-md-6 service-text right debug" style="background-color: [[service.background]];" v-else>
        <h3 class="font-white">[[service.title]]</h3><p class="font-family-lato font-white">[[service.body]]</p>
      </div>
    </div>
  </div> <!-- container-fluid -->

Safari:

• version 9.1.1 (11601.6.17)

OS X:

• version: El Captain 10.11.5 (15F34)

VueJS:

• version: 1.0.26