san/no-use-s-if-with-s-for

disallow use s-if on the same element as s-for

• ⚙️ This rule is included in all of "plugin:san/essential", "plugin:san/strongly-recommended" and "plugin:san/recommended".

📖 Rule Details

This rule is aimed at preventing the use of s-for directives together with s-if directives on the same element.

There are two common cases where this can be tempting:

• To filter items in a list (e.g. s-for="user in users" s-if="user.isActive"). In these cases, replace users with a new computed property that returns your filtered list (e.g. activeUsers).
• To avoid rendering a list if it should be hidden (e.g. s-for="user in users" s-if="shouldShowUsers"). In these cases, move the s-if to a container element (e.g. ul, ol).

<template> <!-- ✓ GOOD --> <ul s-if="complete"> <todo-item s-for="todo in todos" todo="{{todo}}" /> </ul> <todo-item s-for="todo in shownTodos" todo="{{todo}}" /> <!-- ✗ BAD --> <todo-item s-if="complete" s-for="todo in todos" todo="{{todo}}" /><!-- ↑ In this case, the `s-if` should be written on the wrapper element. --> <todo-item s-for="todo in todos" s-if="todo.shown" todo="{{todo}}" /><!-- ↑ In this case, the `s-for` list variable should be replace with a computed property that returns your filtered list. --> </template>

Now loading...

🔧 Options

{
  "san/no-use-s-if-with-s-for": ["error", {
    "allowUsingIterationVar": false
  }]
}

• allowUsingIterationVar (boolean) ... Enables The s-if directive use the reference which is to the variables which are defined by the s-for directives. Default is false.

"allowUsingIterationVar": true

<template> <!-- ✓ GOOD --> <todo-item s-for="todo in todos" s-if="todo.shown" todo="{{todo}}" /> <!-- ✗ BAD --> <todo-item s-for="todo in todos" s-if="shown" todo="{{todo}}" /> </template>

Now loading...

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)