Question

首先，我将解释我的问题以及我在做什么。我正在编码一个表示表中单行的组件。该组件首先显示有关类别的信息（其名称，描述和ID）。我有一个“编辑”按钮，可以在其中编辑每个类别的名称和描述。看起来像这样：

当我单击“编辑”按钮时，我用输入（仅在“名称”和“描述”中）替换数据，因此我能够更改值，然后将信息发送到服务器。

那是什么问题？问题是，当我按下编辑按钮时，我先更改输入值（与v模型绑定），然后再次按下“编辑”按钮（因此我不想更改数据），数据实际上仍为输入是，我不想要那个。我只想要初始值。

好吧，我通过使用：value而不是v-model（也许还有另一种方法？）解决了这个问题。

问题是，当我保存更改然后检查输入是否正确时，它会重新呈现DOM（当我显示错误消息时），因此最初具有输入的值我不想要那。这是组件的代码：

<template>
  <tr>
    <th>
      {{idCategory}}
    </th>
    <td>
      <p v-if="isEditingCategory === false">
        {{category.name}}
      </p>
      <form class="field" v-show="isEditingCategory">
        <div class="control">
          <input  class="input"
            type="text"
            :value="category.name"
            ref="categoryNameInput"
            style="width: auto;">
        </div>
        <p class="help is-danger" v-show="showHelpMessage">al menos 3 caracteres.</p>
      </form>
    </td>
    <td>
      <!-- TODO. hacer un pipe para que muestre solo los primeros 10 caracteres. -->
      <p v-if="isEditingCategory === false">
        {{ category.description }}
      </p>
      <form class="field" v-if="isEditingCategory">
        <div class="control">
          <input class="input" type="text" :value="category.description" ref="descriptionInput" style="width: auto;">
        </div>
      </form>
    </td>
    <td>
      <!-- Buttons... -->
      <button class="button is-info is-outlined" @click="onEditCategory">
      <span class="icon">
      <i class="fas fa-edit"></i>
      </span>
      </button>
      <button class="button is-success"
        @click="onSaveCategory"
        v-if="isEditingCategory">
      <span class="icon">
      <i class="far fa-save"></i>
      </span>
      </button>
    </td>
  </tr>
</template>

export default {
  data() {
    return {
      isEditingCategory: false,
      isPostingChanges: false,
      category: {
        id: this.idCategory,
        name: this.categoryName,
        description: this.categoryDescription,
        index: this.arrayIndex
      },
      showHelpMessage: false
    }
  },
  methods: {
    onSaveCategory() {
      this.showHelpMessage = false;
      const MIN_CHAR = 3;
      const categoryNameValue = this.$refs.categoryNameInput.value;
      const descriptionValue = this.$refs.descriptionInput.value;
      if (categoryNameValue.length >= MIN_CHAR) {
        console.log(categoryNameValue)
      } else {
        this.showHelpMessage = true;
      }
    },
    onEditCategory() {
      this.isEditingCategory = !this.isEditingCategory;
    }
  },
  props: ['idCategory', 'categoryName', 'categoryDescription', 'arrayIndex']
}

Answer 1

处理此类工作流的一般方法是通过以下步骤

切换到编辑模式时，将prop值复制到本地副本，并使用v-model绑定到表单输入
点击保存时，请验证本地值
将值提交到服务器。这也是禁用输入，按钮等的好时机
成功后，使用新值向组件父级发送事件，然后关闭编辑模式
父级接收此事件并更新其数据。数据的更改通过行组件的props向下流动，并且值被更新

例如（仅关注单个输入）

<td>
  <fieldset class="field" :disabled="isPostingChanges" v-if="isEditingCategory">
    <div class="control">
      <input class="input"
        type="text"
        v-model="categoryForm.name"
        style="width: auto;"
      >
    </div>
    <p class="help is-danger" v-show="showHelpMessage">al menos 3 caracteres.</p>
  </fieldset>
  <p v-else>
    {{ category.name }} <!-- ? display the prop value here -->
  </p>
</td>

export default {
  props: { category: Object }, // just pass the entire category object as a prop
  data: () => ({
    isEditingCategory: false,
    isPostingChanges: false,
    showHelpMessage: false,
    categoryForm: null
  }),
  methods: {
    onEditCategory () {
      this.isEditingCategory = !this.isEditingCategory
      if (this.isEditingCategory) {
        // assign local copies from props
        this.categoryForm = { ...this.category }
      }
    },
    async onSaveCategory () {
      // do your validation against `this.categoryForm`, then if valid...

      this.isPostingChanges = true

      // now send to your server (this is all guesswork)
      const res = await fetch(`/api/categories/${this.category.id}`, {
        method: "PUT",
        headers: { "Content-type": "application/json" },
        body: JSON.stringify(this.categoryForm)
      })
      this.isPostingChanges = false
    
      if (res.ok) {
        const updated = await res.json() // the updated values from the server
        this.isEditingCategory = false
        this.$emit("updated", updated) // emit the new values
      }
    }
  }
}

然后在您的父组件中，添加一个侦听器

<row-component
  v-for="(category, index) in categories"
  :key="category.id"
  :category="category"
  @updated="updateCategory($event, index)"
/>

methods: {
  updateCategory(category, index) {
    // remove the old category and replace it with the updated one
    this.categories.splice(index, 1, category)
  }
}

使用v-show时组件会重新渲染吗？ VueJS

1 个答案: