Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to solve the problem of error reporting when using v-if and v-for at the same time, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Errors caused by the use of both v-for and v-if instructions on the same tag during project development.

The error code is as follows:

Error: The 'undefined' variable inside' v for 'directive should be replaced with a computed property that returns filtered array instead. You should not mix'v Flavor for 'with'VFI'

Reason: the priority of v-for is higher than that of v-if, so each rendering will be cycled before the condition is judged, and because v-if will decide whether to render according to the condition of true or false, it will consume performance when using v-if and v-for together. If there is a syntax check, a syntax error will be reported.

1. Nest the v-for on the outer layer of the template (page rendering does not generate DOM nodes), and then do the v-if judgment internally

Note: the key value is written in the element of the package

two。 If the conditions appear inside the loop and have to be put together, the items that do not need to be displayed can be filtered out in advance by calculating the property computed.

{{user.name}} export default {name:'A', data () {return {users: [{name:' aaa',isShow: true}, {name:' bbb',isShow: false}]} }, computed: {/ / filter out items that do not need to be displayed in the list by calculating attributes: activeUsers: function () {return this.users.filter (function (user) {return user.isShow;// returns items from isShow=true, added to the activeUsers array})} Thank you for reading this article carefully. I hope the article "how to solve the problem of using v-if and v-for to report errors at the same time" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.