Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2022, 12:26
Аспирант
Отправить личное сообщение для yozuul Посмотреть профиль Найти все сообщения от yozuul
 
Регистрация: 14.06.2013
Сообщений: 64

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

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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

Последний раз редактировалось рони, 17.07.2022 в 13:17.
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2022, 04:39
Аспирант
Отправить личное сообщение для yozuul Посмотреть профиль Найти все сообщения от yozuul
 
Регистрация: 14.06.2013
Сообщений: 64

рони,
Спасибо.
А если 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Сообщение от 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>
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2022, 20:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,489

Чтоб не запариваться с предзаполнением id-шников -
@click="$set(itemsFlag, id, !itemsFlag[id])"
(в vue 3 этого уже не нужно)
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2022, 20:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Aetae,
подскажи url vue 3 для строки 17 пост #4?
или как код выше будет выглядеть для версии 3?
что из этого грузить https://cdnjs.com/libraries/vue/3.2.37 ?
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2022, 20:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Сообщение от Aetae
@click="$set(itemsFlag, id, !itemsFlag[id])"
Ответить с цитированием
  #8 (permalink)  
Старый 20.07.2022, 04:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,489

рони, vue.runtime.global.min.js
__________________
29375, 35
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2022, 06:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Aetae,
спасибо!!!
Ответить с цитированием
  #10 (permalink)  
Старый 20.07.2022, 06:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос новичка один стор и несколько комбобоксов kevinlexus ExtJS 1 13.03.2017 11:13
Несколько вопросов о jQuery karakym Общие вопросы Javascript 2 07.10.2016 10:23
Несколько вопросов новичка FanAizu Общие вопросы Javascript 2 30.10.2011 12:37
Несколько вопросов про jquery от новичка Delfi jQuery 3 24.11.2010 10:55
Несколько вопросов про таймер ВэйДлин Общие вопросы Javascript 19 06.08.2010 01:16