Форум

yozuul · #1 (**permalink**) 17.07.2022, 12:26

Салют.
Прошу прощения за бестолковые вопросы, но по некоторым поиск в гугле ничего вразумительного не даёт, по другим не знаю как правильно сформировать запрос. Прошу помочь с вопросами:

1. Эти две записи идентичны?

<script setup>
</script>

<script>
export default {
   setup() {
      
   }
}
</script>

2. Имеем такой инпут

<input
   v-model="test"
   @input="test=$event.target.value"
>

При клике по некоторой кнопке, надо получить value.
Так работает:

<script>
export default {
   data() {
      return {
         test: ''
      }
   }
}
</script>

Так нет. Как правильно объявлять?

<script setup>
const test = ''
</script>

3. Есть такой код

<div
   class="item"
   v-for="item in items"
   :key="item.id"
>
<button>Клик</button>
</div>

Можно ли средствами vue реализовать, чтобы при клике по кнопке, добавлялся/удалялся класс у родителя?

рони · #2 (**permalink**) 17.07.2022, 13:10

Сообщение от yozuul

3. Есть такой код

<!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.5.17/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="item in items" :key="item.id" :class="[{ active: item.isActive },'item']">
            <button @click="item.isActive = !item.isActive">Клик</button>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                
                items: [{
                    id: 1,
                    isActive: false
                }, {
                    id: 2,
                    isActive: false
                }, {
                    id: 3,
                    isActive: false
                }]
            }
        });
    </script>
</body>

</html>

yozuul · #3 (**permalink**) 18.07.2022, 04:39

рони,
Спасибо.
А если isActive не в массив с данными помещать?
Так делают, вообще?

<script>
export default {
   data() {
      return {
         itemsData: this.$store.state.someDataArray,
         itemsFlag: {}
      }
   },
   mounted() {
      for (let item of itemsData) {
         itemsFlag[`item_${item.id}`] = false
      }
   }
}
</script>

рони · #4 (**permalink**) 18.07.2022, 07:58

Сообщение от 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>

Aetae · #5 (**permalink**) 19.07.2022, 20:16

Чтоб не запариваться с предзаполнением id-шников -

@click="$set(itemsFlag, id, !itemsFlag[id])"

(в vue 3 этого уже не нужно)

рони · #6 (**permalink**) 19.07.2022, 20:34

Aetae,
подскажи url vue 3 для строки 17 пост #4?
или как код выше будет выглядеть для версии 3?
что из этого грузить https://cdnjs.com/libraries/vue/3.2.37 ?

рони · #7 (**permalink**) 19.07.2022, 20:36

Сообщение от Aetae

@click="$set(itemsFlag, id, !itemsFlag[id])"

Aetae · #8 (**permalink**) 20.07.2022, 04:16

рони, vue.runtime.global.min.js

рони · #9 (**permalink**) 20.07.2022, 06:49

Aetae,
спасибо!!!

рони · #10 (**permalink**) 20.07.2022, 06:51

Aetae,
что-то не так ...

<!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/3.2.37/vue.runtime.global.min.js" ></script>
</head>

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

               }
            }
        });
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript