主页 / coding / 问题 / 79099725
Accepted
Sanyokk
Asked: 2024-10-18 04:20:18 +0800 CST

Vue.js 中更改块编辑状态的函数不起作用

  • 772

我正在开发一个简单的笔记应用程序，现在我正在处理 NoteItem 组件。它有两个按钮：编辑笔记和删除笔记。第二个按钮工作正常，但第一个按钮不行。它调用 startRedacting() 函数，但编辑变量没有改变，因此 v-else 块没有渲染。

注意项.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 个回答

  1. Best Answer

    您的状态不具有反应性，因为它未使用ref或reactive辅助程序声明，请使用定义状态变量，ref然后使用以下方法对其进行变异.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>

    无需.value在模板中使用：

      <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

相关问题