Показать сообщение отдельно
  #4 (permalink)  
Старый 18.07.2022, 07:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от yozuul
А если isActive не в массив с данными помещать?
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            border: 1px solid #008000;
            margin: 4px;
        }

        .active {
            border: 1px solid red;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.7/vue.min.js" ></script>
</head>

<body>
    <div id="app">
        <div v-for="{id} in itemsData"  :class="[{ active: itemsFlag[id] },'item']">
            <button @click="itemsFlag[id] = !itemsFlag[id]">Клик</button>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                itemsData: [{
                    id: "a"
                }, {
                    id: "b"
                }, {
                    id: "c"
                }],
               itemsFlag : {
                  "a" : false,
                  "b" : false,
                  "c" : false
               }
            }
        });
    </script>
</body>

</html>
Ответить с цитированием