Vue js не обновляет страницу

Question

Vue js не обновляет страницу

Рейтинг: 1Ответов: 2Опубликовано: 20.07.2023

Всем привет, подскажите пожалуйста, практикуюсь во Vue 3, написал простой counter, но при нажатии на + и - на странице не обновляется счётчик, но если я поменяю значение директивы на что то другое, и сохраню - значение переменной обновляется, я так понимаю это нереактивность? Как это исправить?

<script setup>
    let counter = 0
</script>

<template>
    <body>
        <div>
            <h1>Счётчик: {{ counter }}</h1>
            <div class="btns">
                <button class="btn plus" @click="counter += 1">+</button>
                <button class="btn minus" @click="counter -= 1">-</button>
            </div>
        </div>
    </body>
</template>

<style scoped>

    body {
        background-color: brown;
    }

    div {
        padding-top: 50px;
        max-width: 500px;
        margin: 0 auto;
        background-color: blue;
    }

    h1 {
        color: pink;
        margin: 0 auto;
        max-width: max-content;
    }

    .btns {
        max-width: max-content;
        margin: 0 auto;
        display: flex;
        gap: 50px;
    }

    .btn {
        border: none;
        padding: 10px;
        cursor: pointer;
    }

    .minus {
        border-radius: 10px;
        background-color: red;
    }

    .plus {
        border-radius: 10px;
        background-color: green;
    }

</style>

css html vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

<script setup>
   import {ref} from 'vue'
   const counter = ref(null)
</script>

Answer 2

▲ 1

Vue js не обновляет страницу

Я не особо спец во Vue... Но вот такой вариант вполне считается рабочим.

const app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    inc() {
      this.counter += 1
    },
    dec() {
      this.counter -= 1
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div>
    <h1>Счётчик: {{ counter }}</h1>
    <div class="btns">
      <button class="btn plus" @click="inc">+</button>
      <button class="btn minus" @click="dec">-</button>
    </div>
  </div>
</div>

Такой вот пример нашел для ТСа...

<template>
  <div>
    <button @click="count++">increment</button>
    <button @click="count--">decrement</button>
    <p>{{ count }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return { count: 0 };
  },
};
</script>

Более подробнее уже тут https://skine.ru/articles/66848/

Vue js не обновляет страницу

Ответы