vuejs의 temp 값이 있는 테이블에서 새 레코드를 추가하는 방법

vuejs의 temp 값이 있는 테이블에서 새 레코드를 추가하는 방법

기록이 있는 테이블이 있습니다.필드를 클릭하면 인라인 편집 옵션이 있습니다.새 행을 추가할 수 있는 옵션이 있습니다.

문제는 새로 추가하기를 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>

사용자가 기존 입력을 제출하지 않는 한 새 입력을 추가하지 못하도록 하는 것은 어떨까요?

당신이 그 코드를 제공하지 않았기 때문에 당신의 코드가 어떻게 작동하는지 알 수 없습니다.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>

언급URL : https://stackoverflow.com/questions/57475500/how-to-add-new-records-in-a-table-with-temp-values-in-vuejs