Question

我有一张带有记录的表。单击该字段时，有一个用于内联编辑的选项。有一个添加新行的选项。

问题是，当我单击“添加新的2次”，并且表中有2个空行包含输入并开始键入时，这两个行的字段值都会更改。

这是因为我使用v-model="temp.name"和isCreateMode，并且在我的情况下，此temp模型有几行，但是我不确定如何处理。

temp是必需的，因为用户可以取消编辑该字段。我使用相同的输入字段进行创建和编辑。

//in component
// other code here
computed: {
  ...mapState([
    'editModeField',
    'editedUser',
    'editMode',
    'createMode',
    'temp',
    'users'
  ]),
  ...mapGetters([
    'filteredUsers'
  ]),
  isEditable (field, user, index) {
    if (this.isCreateMode(user)) {
      return this.users[index] === user
    }
    return this.editedUser === user && this.editModeField === 
    field
  },
   isEditMode (field, user) {
     return this.editMode && this.editedUser === user && 
      this.editModeField === field
  },
  isCreateMode (user) {
    return this.createMode && !user.id
  },
  addUser (user, index) {
    if (!user) {
      user = {
        name: '',       
        car: ''
      }
      this.toggleCreateMode(true)
      this.createUser(user)
      return
    }
    // this makes a request to the endpoint 
    this.storeUser(user, index)
  },
  
  
  //actions.js
  createUser ({ state, commit }, user) {
    commit('CREATE_USER', user)
    commit('SET_TEMP_OBJECT', { name: '', car: null })
  },
  
  //mutations
   CREATE_USER (state, user) {
    state.users.push(user)
  },
  SET_TEMP_OBJECT (state, user) {
    state.temp = user
  },

<table>
<tr v-for="user, index in filteredUsers">
  <td>{{ index + 1 }}</td>
  <td>
    <input
      v-if="isEditable('name', user, index)"
      v-model="temp.name"
      v-focus="!isCreateMode(user)" />
    <div v-if="isEditMode('name', user)"
       @click="updateField('name', user)"></div>
    <span v-if="isEditMode('name', user)"
      @click="cancelUpdate('name', user)"></span>
    <span
      v-if="isShowMode('name', user)"
      @click="editField('name', user)">{{ user.name }}</span>
  </td>
   <td>
    <a href="javascript:void(0)"
      @click="addUser()">
      Add user</a>
  </td>
  // other columns
</table>

Answer 1

如何阻止用户添加新输入，除非他提交了现有输入：

由于您没有提供商店数据的temp /状态，所以我真的看不到代码的工作方式，但是建议的解决方案应该是这样的：

new Vue({
  el: "#app",
  data: {
    users: ['foo', 'bar'],
    input: '',
    counter: 0
  },
  methods: {
    addUser(user) {
      if (this.counter == 0) {
        this.counter++
      } else if (this.counter == 1 && user) {
        this.counter--
          this.input = ''
        this.users.push(user)
      } else {
        alert('please fill the exisiting input')
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-for="n in counter" type="text" v-model="input">
  <button @click="addUser(input)">addUser</button>
  <ul>
    <li v-for="user in users">{{user}}</li>
  </ul>
</div>

如何在Vue.js中使用临时值在表中添加新记录

1 个答案: