Javascript VueJS v-for呈现列表，尽管v-if求值为false_Javascript_Vue.js_Vuejs2

Javascript VueJS v-for呈现列表，尽管v-if求值为false

javascript vue.js vuejs2

Javascript VueJS v-for呈现列表，尽管v-if求值为false,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,据报道, 避免在列表应隐藏时呈现列表（例如v-for=“用户中的用户”v-if=“shouldShowUsers”）。在>这些情况下，将v-if移动到容器元素（例如ul、ol）在本例中，我使用v-for呈现表行中的数据，但当列表为null时，v-for仍尝试访问null对象的属性，这导致以下控制台错误：呈现中出错：“TypeError:无法读取null的属性“logo” 这是我的HTML代码 <tbody class="list" v-i

据报道,

避免在列表应隐藏时呈现列表（例如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>


{{subscriber.name}
{{subscriber.email}
{{subscriber.licenses}
{{subscriber.status}
找不到订户。

当subscribers list为null时，v-else块将被呈现，这可以正常工作，但是控制台仍然会记录上述错误

呈现中出错：“TypeError:无法读取null的属性“logo”

如果订阅者列表为空，如何阻止v-for尝试渲染？

newvue({
el:“应用程序”
})


如果
其他的

newvue({
el:“应用程序”
})


如果
其他的

您能否澄清这三种情况中哪一种适用？1. <代码>订户为

空

，2

subscribers

是一个空数组，3

subscribers

是一个包含值

null

的数组。在问题中，您建议

subscribers

为

null

，但在这种情况下

v-if=“subscribers.length>0”

应在尝试访问

null

的

length

属性时抛出错误。您的

v-if

似乎是针对案例2，但鉴于您看到的错误消息，您更可能是在第三个案例中。@Skillle，感谢您的回答，我的v-if针对案例2，正如您正确提到的，无论出于何种原因，代码现在都像以前一样工作正常，没有任何错误。我会改变一切。我会再次测试以确定这一点。你能澄清这三种情况中哪一种适用吗？1. <代码>订户为

空

，2

subscribers