Question

为避免呈现应隐藏的列表（例如v-for =“用户中的用户” v-if =“ shouldShowUsers”）。在这种情况下，请将v-if移至容器元素（例如ul，ol）。

就我而言，我使用v-for呈现表行中的数据，但是当列表为null时，v-for仍尝试访问null对象的属性，这导致以下控制台错误：

渲染错误：“ TypeError：无法读取null的属性'logo'”

这是我的HTML代码

                        <tbody class="list" v-if="subscribers.length > 0">
                        <tr v-for="(subscriber, index) in subscribers" :key="index">
                            <th scope="row">
                                <div class="media align-items-center">
                                    <a href="#" class="avatar rounded-circle mr-3">
                                        <img alt="subscriber.logo" :src="`/img/avatars/${subscriber.logo}`">
                                    </a>
                                    <div class="media-body">
                                        <span class="name mb-0 text-sm">{{subscriber.name}}</span>
                                    </div>
                                </div>
                            </th>
                            <td>{{subscriber.email}}</td>
                            <td>{{subscriber.licenses}}</td>
                            <td>{{subscriber.status}}</td>
                            <td class="table-actions">
                                <a href="#!" class="table-action" data-toggle="tooltip"
                                   data-original-title="Edit">
                                    <i class="fas fa-user-edit" v-on:click="loadSubscriberEdit(index)"></i>
                                </a>
                                <a href="#!" class="table-action table-action-delete" data-toggle="tooltip"
                                   data-original-title="Delete">
                                    <i class="fas fa-trash" v-on:click="deleteSubscriber(index)"></i>
                                </a>

                                <a href="#!" v-bind:class="computeActiveActions(index)"
                                   :key="activeActionClassKey"
                                   data-toggle="tooltip"
                                   data-original-title="Delete">
                                    <i v-bind:class="computeActive(index)" :key="activeClassKey"
                                       v-on:click="toggleActivation(index)"></i>
                                </a>

                            </td>
                        </tr>
                        </tbody>
                        <tbody v-else>
                        <tr>
                            <td class="table-actions">No Subscriber found.</td>
                        </tr>
                        </tbody>

当订户列表为null时，将呈现v-else块，但工作正常，但是控制台仍记录上述错误

渲染错误：“ TypeError：无法读取null的属性'logo'”

如果订户列表为空，我该怎么办才能阻止v-for尝试呈现？

Answer 1

new Vue({
  el: "#app"
})

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

<!-- CASE 1 -->
	
	<!--div id="app">
    <table>
      <tbody v-if="false">
      	if
      </tbody>
     <tbody v-else>
      	 else
      </tbody>
    </table>
  </div-->



<!-- CASE 2 -->
<div id="app">
    <table>
      <tbody>
      	<template v-if="false">
      		if
      	</template>
	<template >
      		else
      	</template>
      </tbody>
    </table>
  </div>

我知道这很奇怪，但是由于某些原因，v-if似乎不适用于tbody。情况1是所需的代码，情况2是可解决的

VueJS v-for渲染列表，尽管v-if评估为false

1 个答案: