Início / coding / Perguntas / 79099725
Accepted
Sanyokk
Asked: 2024-10-18 04:20:18 +0800 CST

A função Vue.js para alterar o estado de redação de um bloco não está funcionando

  • 772

Estou desenvolvendo um aplicativo de notas simples, agora mesmo estou trabalhando no componente NoteItem. Ele tem dois botões: para redigir uma nota e para excluí-la. O segundo funciona muito bem, mas o primeiro não. Ele chama a função startRedacting(), mas a variável de redação não está mudando, portanto o bloco v-else não está renderizando.

NoteItem.vue:

<script setup lang="ts">
import axios from "axios";
const props = defineProps(['title', 'content', 'note_id']);

let redacting = undefined;

let redTitle = props.title;
let redContent = props.content;

const deleteNote = async () => {
  await axios.delete(`http://localhost:3000/notes/${props.note_id}`)
      .then((res) => {
        if (res.status === 204) {
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}

const startRedacting = () => {
  redacting = true
}

const redactNote = async () => {
  await axios.put(`http://localhost:3000/notes/${props.note_id}`, {
    Title: redTitle,
    Content: redContent
  })
      .then((res) => {
        if (res.status === 200) {
          redacting = false
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}
</script>

<template>
<div class="flex flex-row justify-between border-2 border-r-6 border-gray-200 p-3 rounded-md">
  <div class="flex w-2.5 h-full bg-red-500 rounded-3xl resize-none flex-none" id="strip">
    <!--Poloska-->
  </div>
  <div v-if="!redacting" class="flex flex-col ml-8 text-wrap justify-self-start justify-start">
    <div id="title" class="text-xl justify-self-center text-left">
      {{ title }}
    </div>
    <div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
      {{ content }}
    </div>
  </div>
  <div v-else>
    <div class="flex flex-col ml-8 text-wrap justify-self-start justify-start pr-2">
      <div class="text-xl justify-self-center text-left">
        <input type="text" v-model="redTitle" class="border-2 border-gray-200 rounded-md p-2 w-full">
      </div>
      <div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
        <textarea v-model="redContent" class=" border-2 border-gray-200 rounded-md p-2 w-full"></textarea>
      </div>
      <button class="size-8  hover:shadow-neutral-300 hover:bg-green-700 rounded-lg justify-center w-full bg-green-600" @click="redactNote">
        <div class="text-white">Done</div>
      </button>
    </div>
  </div>
  <div class="flex flex-col">
    <button class="size-8 hover:shadow-neutral-300 hover:bg-neutral-200 rounded-lg" @click="startRedacting">
      <img src="../assets/pencil.svg" alt="" class="justify-self-center">
    </button>
    <button class="size-8 hover:shadow-neutral-300 hover:bg-red-400 rounded-lg mt-2" @click="deleteNote">
      <img src="../assets/trash-svgrepo-com.svg" alt="" class="pt-1">
    </button>
  </div>
</div>
</template>

<style scoped>
</style>
javascript

1 respostas

  1. Best Answer

    Seu estado não é reativo, pois não é declarado com refou reactivehelpers, defina sua variável de estado usando refe então altere-a usando .value:

    <script setup lang="ts">
import { ref } from 'vue'

//....

let redacting = ref();

//...

const deleteNote = async () => {
  await axios.delete(`http://localhost:3000/notes/${props.note_id}`)
      .then((res) => {
        if (res.status === 204) {
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}

const startRedacting = () => {
  redacting.value = true
}

const redactNote = async () => {
  await axios.put(`http://localhost:3000/notes/${props.note_id}`, {
    Title: redTitle,
    Content: redContent
  })
      .then((res) => {
        if (res.status === 200) {
          redacting.value  = false
          location.reload()
        }
        else {
          console.log(`HTTP STATUS ${res.status}`)
        }
      })
}
</script>

    não precisa usar .valueno modelo:

      <div v-if="!redacting" class="flex flex-col ml-8 text-wrap justify-self-start justify-start">
    <div id="title" class="text-xl justify-self-center text-left">
      {{ title }}
    </div>
    <div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
      {{ content }}
    </div>
  </div>
    • 2

relate perguntas