当文本区域留空时，如何禁用我的提交按钮？

Question

我正在尝试制作一个在文本区域留空时禁用的提交按钮，但可惜我没有看到结果。如果有任何建议可以幸免，将不胜感激。这是与此问题相关的代码。这个提交按钮就像它没有被禁用一样工作，所以我猜我的打字稿或者我首先构建禁用的方式一定有问题，但我已经到了我用完的地步的想法。如果有人有任何问题，请随时提出。

<template>
  <div id="editEntryDiv">
    <div id="mainContent" v-if="loaded">
      <PartsForm v-model="localPartEntry" />
    </div>

    <Teleport to="#mainContent">
      <div class="actionBar">
        <!-- Empty Div Required for formatting -->
        <div>
          <button id="deleteButton" @click="deleteItem(parseInt(id))">
            <i class="fas fa-trash"></i>
            <span>Delete</span>
          </button>
        </div>

        <!-- Empty Div Required for formatting -->
        <div>
          <button
            id="submitButton"
            :class="{ disabled: localPartEntry.partNumber == undefined }"
            :disabled="localPartEntry.partNumber == undefined"
            @click="submitItem"
          >
            <i class="fas fa-paper-plane"></i>
            <span>Submit</span>
          </button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

这是打字稿：

<script lang="ts">
import { defineComponent } from "vue";
import { usePartStore } from "../stores/part-store";
import PartsForm from "../components/PartsForm.vue";
import { PartDefinition } from "../types/PartDefinition";
import { mapStores } from 'pinia'
export default defineComponent({
  components: {
    PartsForm,
  },
  data() {
    return {
      loaded: false,
      localPartEntry: {} as PartDefinition,
    };
  },
  watch: {
    localPartEntry: {
      handler() {
        if (!this.loaded) return
        sessionStorage.setItem("unsavedPart", JSON.stringify(this.localPartEntry))
      },
      deep: true
    }
  },
  computed: {
    ...mapStores(usePartStore),
    id(): string {
      return this.$route.params.id.toString();
    },
  },
  methods: {
    async submitItem(): Promise<void> {
      this.localPartEntry.id = parseInt(this.id);
      if (await this.partStore.editPartDefinition(this.localPartEntry))
        if (await this.partStore.getParts())
          this.$router.push({
            path: `/`,
          });
    },
    async deleteItem(id: number) {
      if (confirm("Are you sure you want to delete this entry?"))
        if (await this.partStore.deletePartDefinition(id))
          if (await this.partStore.getParts())
            this.$router.push({
              path: `/`,
            });
    },
  },
  mounted() {
    for (let element of this.partStore.partEntries as PartDefinition[]) {
      if (element.id == parseInt(this.$route.params.id.toString())) {
        this.localPartEntry.id = element.id;
        this.localPartEntry.partNumber = element.partNumber;
        this.localPartEntry.variant = element.variant;
        this.localPartEntry.revision = element.revision;
        this.localPartEntry.description = element.description;
        this.localPartEntry.supplier = element.supplier;
        this.localPartEntry.previewImagePath = element.previewImagePath;
        this.localPartEntry.previewImageDateTime = element.previewImageDateTime;
        this.localPartEntry.obsolete = element.obsolete;
        this.localPartEntry.internalOnly = element.internalOnly;

        this.loaded = true;
        break;
      }
    }
  },
});
</script>

最后，css：

<style lang="sass" scoped>

#editEntryDiv
  width: 100%
  height: 100%
  background: $primary-background

  display: flex
  flex-direction: column
  overflow-y: auto

  -ms-overflow-style: none // for Internet Explorer, Edge */
  scrollbar-width: none // for Firefox */

  &::-webkit-scrollbar
    display: none // for Chrome, Safari, and Opera */

#mainContent
  margin-top: 1rem
  margin-bottom: 5rem
  flex-grow: 1

#submitButton
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent

  display: flex
  flex-direction: row
  justify-content: center
  align-items: center
  gap: .5rem

  &:hover
    color: $tertiary-background
    background: $primary-accent-color
.disabled
  background: grey !important
#deleteButton
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent

  display: flex
  flex-direction: row
  justify-content: center
  align-items: center
  gap: .5rem

  &:hover
    color: $tertiary-background
    background: $primary-accent-color
.actionBar
  width: 100%
  min-height: 4rem !important
  background: $secondary-background

  display: flex
  justify-content: space-between

  position: fixed
  bottom: 0px
  right: 0px

  &>div
    display: flex
    flex-direction: row
    align-items: center
    gap: 1rem
    margin: 0 1rem
</style>

Answer 1

您可以使用Logical NOT (!) 运算符进行检查，该运算符将真实变为虚假，反之亦然。因此，如果 textarea 中没有值，它将返回 false 否则 true。

工作演示：

new Vue({
  el: '#app',
  data: {
    content: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Textarea content: {{ content }}
  <br><br>
  <textarea v-model="content"></textarea>
  <button id="submitButton" :disabled="!content.trim()">
    <span>Submit</span>
  </button>
</div>

我只是添加了一个示例来向您展示如何实现。您可以在原始代码中进行更改。