AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 76969745
Accepted
Amrmsmb
Amrmsmb
Asked: 2023-08-24 21:24:01 +0800 CST2023-08-24 21:24:01 +0800 CST 2023-08-24 21:24:01 +0800 CST

O observador não aciona

  • 772

Estou usando o Vue 3 com API de opções.

Conforme mostrado no código postado abaixo, no watchobjeto, eu monitoro as alterações ocorridas em isToggleBtnLabelDigitizePolygon. No método onDigitizePolygoneu mudo o valor de isToggleBtnLabelDigitizePolygon, porém, quando o valor deste último é alterado, a propriedade computada compPropsIsToggleBtnDigitizePolygoné executada indicando a mudança de isToggleBtnLabelDigitizePolygon, mas o watcher isToggleBtnLabelDigitizePolygonnunca é executado, ou seja, as declarações de log dentro desse watcher nunca são executadas .

Para resolver esse problema, também tentei o seguinte

watch: {
    'isToggleBtnLabelDigitizePolygon.value'(newVal, oldVal) {
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

        if (newVal == true && oldVal == false) {
            console.log(debugTag, 'removeDigitized()');
        } else if (newVal == false && oldVal == true) {
            console.log(debugTag, 'digitize()');
        }
    },
},

mas também não funcionou

Por que o observador não dispara e como consertar?

aplicativo.vue :

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
import { ref } from 'vue';

let isToggleBtnLabelDigitizePolygon = ref(true);

let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal == true && oldVal == false) {
                console.log(debugTag, 'removeDigitized()');
            } else if (newVal == false && oldVal == true) {
                console.log(debugTag, 'digitize()');
            }
        },
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            if (isToggleBtnLabelDigitizePolygon.value == true) {
                return 'digitize'
            } else {
                return 'clear'
            }
        },
    },
    methods: {
        onDigitizePolygon() {
            isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
        },
    },
};
</script>
vue.js
  • 1 1 respostas
  • 35 Views

1 respostas

  • Voted
  1. Best Answer
    Tanzer Atay
    2023-08-24T21:43:36+08:002023-08-24T21:43:36+08:00

    Vejo que você está tentando usar ref() com a propriedade de composição na API de opções. Se você corrigir sua sintaxe, o código funcionará corretamente. Espero poder ajudar.

    Como exemplo de código:

    <template>
      <button
        id="idBtnDigitizePolygon"
        class="clsBtnDigitizePolygon"
        :disabled="isBtnDigitizePolygonDisabled"
        @click="onDigitizePolygon()"
      >
        {{ compPropsIsToggleBtnDigitizePolygon }}
      </button>
    </template>
    
    <script>
    
    let debugTag = 'D.ButtonDigitizePolygon.vue::';
    let infoTag = 'I.ButtonDigitizePolygon.vue::';
    
    export default {
      props: {
        isBtnDigitizePolygonDisabled: {
          type: Boolean,
          default: false,
        },
      },
      data() {
        return {
          isToggleBtnLabelDigitizePolygon: false,
        };
      },
      computed: {
        compPropsIsToggleBtnDigitizePolygon() {
          if (this.isToggleBtnLabelDigitizePolygon.value === true) {
            return 'digitize';
          } else {
            return 'clear';
          }
        },
      },
      watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
          console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal);
          console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal);
    
          if (newVal === true && oldVal === false) {
            console.log(debugTag, 'removeDigitized()');
          } else if (newVal === false && oldVal === true) {
            console.log(debugTag, 'digitize()');
          }
        },
      },
      methods: {
        onDigitizePolygon() {
          this.isToggleBtnLabelDigitizePolygon = !this.isToggleBtnLabelDigitizePolygon;
        },
      },
    };
    </script>
    

    ou você pode usar ref() na função de configuração como esta:

    setup() {
        const isToggleBtnLabelDigitizePolygon = ref(false);
        return {
          isToggleBtnLabelDigitizePolygon,
        };
      }
    
    • 0

relate perguntas

  • Como fazer o botão pausar/continuar para o swiper

  • vuejs: Alterando HTML antes do prompt de confirmação

  • Autenticação Vue

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    destaque o código em HTML usando <font color="#xxx">

    • 2 respostas
  • Marko Smith

    Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}?

    • 1 respostas
  • Marko Smith

    Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)?

    • 2 respostas
  • Marko Smith

    Por que as compreensões de lista criam uma função internamente?

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 respostas
  • Marko Smith

    Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)?

    • 4 respostas
  • Marko Smith

    Por que o construtor de uma variável global não é chamado em uma biblioteca?

    • 1 respostas
  • Marko Smith

    Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto?

    • 1 respostas
  • Marko Smith

    Somente operações bit a bit para std::byte em C++ 17?

    • 1 respostas
  • Martin Hope
    fbrereto Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi Por que as compreensões de lista criam uma função internamente? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A formato fmt %H:%M:%S sem decimais 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python std::views::filter do C++20 não filtrando a visualização corretamente 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa Por que o construtor de uma variável global não é chamado em uma biblioteca? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev Por que os compiladores perdem a vetorização aqui? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan Somente operações bit a bit para std::byte em C++ 17? 2023-08-17 17:13:58 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve