Question

我是VueJS的新手。我正在尝试使用简单的“保存”和“取消”功能创建表单。将模型绑定到表单字段时，它们会在输入更改时立即更新，但我不希望紧密绑定。相反，我希望能够在按下“保存”按钮时保存并提交，并在按下“取消”按钮时恢复更改。

建议的Vue方式是什么？

如果我们能够显示服务器保存状态并在提交失败时在表单上指明它也是理想的。如果您知道任何可能非常有用的示例或示例。谢谢！

<template>
  <div id="app">
    <div>
      First Name:
      <input type="text" v-model="user.firstName" :disabled="!isEditing"
             :class="{view: !isEditing}">
    </div><div>
      Last Name:
      <input type="text" v-model="user.lastName" :disabled="!isEditing"
             :class="{view: !isEditing}">  
    </div>
    <button @click="isEditing = !isEditing">
      {{ isEditing ? 'Save' : 'Edit' }}
    </button>
    <button v-if="isEditing" @click="isEditing = false">Cancel</button>
  </div>
</template>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      isEditing: false,
      user: {
        firstName: 'John',
        lastName: 'Smith'
      }
    }
  })
</script>

<style>
  .view {
    border-color: transparent;
    background-color: initial;
    color: initial
  }
</style>

Answer 1

有几种方法可以解决这个问题。您可以为表单创建单独的组件，将props传递给它，然后通过发出更改来处理编辑/保存，或者如果要将其保留在单个组件中，则可以使用value绑定和{{1} }，例如

refs

var app = new Vue({
  el: '#app',
  data: {
    isEditing: false,
    user: {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  methods: {
    save() {
      this.user.firstName = this.$refs['first_name'].value;
      this.user.lastName = this.$refs['last_name'].value;
      this.isEditing = !this.isEditing;
    }
  }
})

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

或者您可以使用可变缓存机制（使用建议的编辑），例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <div>
    First Name:
    <input type="text" ref="first_name" :value="user.firstName" :disabled="!isEditing"
           :class="{view: !isEditing}">
  </div><div>
    Last Name:
    <input type="text" ref="last_name" :value="user.lastName" :disabled="!isEditing"
           :class="{view: !isEditing}">  
  </div>
  <button @click="isEditing = !isEditing" v-if="!isEditing">
    Edit
  </button>
  <button @click="save" v-else-if="isEditing">
  Save
  </button>
  
  <button v-if="isEditing" @click="isEditing = false">Cancel</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    isEditing: false,
    user: {
      firstName: 'John',
      lastName: 'Smith',
    }
  },
  mounted() {
    this.cachedUser = Object.assign({}, this.user);
  },
  methods: {
    save() {
      this.cachedUser = Object.assign({}, this.user);
      this.isEditing = false;
    },
    cancel() {
      this.user = Object.assign({}, this.cachedUser);
      this.isEditing = false;
    }
  }
})

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

使用这些选项中的任何一个，您都可以在<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <div> First Name: <input type="text" v-model="user.firstName" :disabled="!isEditing" :class="{view: !isEditing}"> </div><div> Last Name: <input type="text" v-model="user.lastName" :disabled="!isEditing" :class="{view: !isEditing}"> </div> <button @click="isEditing = !isEditing" v-if="!isEditing">Edit</button> <button @click="save" v-else-if="isEditing">Save</button> <button v-if="isEditing" @click="cancel">Cancel</button> </div>方法的开头设置状态消息，然后在完成服务器调用后更新它。

使用保存和取消选项编辑表单

1 个答案: