테이블 셀에서의 VueJ 이행

테이블 셀에서의 VueJ 이행

VueJs의 테이블 셀 요소에 대한 작업 전환을 시도하고 개체 내에서 변경된 항목에 대한 작업을 수행하려고 합니다.데이터 스토어에 Vuex를 사용하고 있는데 개별 셀에서도 Vuex를 사용할 수 없는 것 같습니다(Fiel 1 참조).

// This call state data.
const state = {
  items: [{
    id: 1,
    text: 'Hello',
    name: 'Bill'
  }, {
    id: 2,
    text: 'There',
    name: 'Diane'
  }, {
    id: 3,
    text: 'My',
    name: 'John'
  }, {
    id: 4,
    text: 'Name',
    name: 'Anne'
  }, {
    id: 5,
    text: 'is',
    name: 'Fred'
  }, {
    id: 6,
    text: 'Hello',
    name: 'Yasmine'
  }, ]
}

// This is look like events.
const mutations = {
  UPDATEITEM(state, item) {
    var changedItem = state.items.find((checkItem) => {
      return checkItem.id == item.id;
    });
    if (item.text) {
      changedItem.text = item.text;
    } else if (item.name) {
      changedItem.name = item.name;
    }
  },
}

// This is store!!!.
const store = new Vuex.Store({
  state,
  mutations,
  getters: {
    items: function(state) {
      return state.items
    }
  },
  // Call action to dispatch 
  actions: {
    UPDATEITEM: function(store, item) {
      store.commit('UPDATEITEM', item)
    }
  }
})

// Vue 
const vm = new Vue({
  el: '#container',
  data: {
    id: 3,
    name: '',
    text: ''
  },
  store,
  methods: {
    changeName: function() {
      const item = {
        id: this.id,
        name: this.name
      };
      this.$store.dispatch('UPDATEITEM', item);

    },
    changeText: function() {
      const item = {
        id: this.id,
        text: this.text
      };
      this.$store.dispatch('UPDATEITEM', item);
    },
    getItemById: function(id) {
      var item = this.items.find((checkItem) => {
        return checkItem.id == id;
      });
      if (item) {
        return item;
      } else {
        return {
          name: ''
        };
      }
    }
  },
  computed: {
    items: {
      get() {
        return this.$store.getters.items;
      }
    }
  }
})

  .update-enter-active {
        transition: all .5s ease-in;
    }

    .update-leave-active {
        transition: all .5s ease-out;
    }

    .update-enter, .update-leave-to {
        opacity: .5;
        background-color: #fd0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="container">
  <ul>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>message</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items">
        <td><transition name="update"><span :key="item.id + '-name'">{{item.name}}</span></transition></td>
        <td><transition name="update"><span :key="item.id + '-text'">{{item.text}}</span></transition></td>          
        </tr>
      </tbody>
    </table>

  </ul>
  <div>
    User id:
    <input v-model="id">
    {{getItemById(id).name}}
  </div>
  <div>
    Change Name:
    <input v-model="name" v-on:keyup.enter="changeName">
  </div>
  <div>
    Change Text:
    <input v-model="text" v-on:keyup.enter="changeText">
  </div>

</div>

또는 행의 이행 그룹(바이들2 참조):

// This call state data.
const state = {
  items: [{
    id: 1,
    text: 'Hello',
    name: 'Bill'
  }, {
    id: 2,
    text: 'There',
    name: 'Diane'
  }, {
    id: 3,
    text: 'My',
    name: 'John'
  }, {
    id: 4,
    text: 'Name',
    name: 'Anne'
  }, {
    id: 5,
    text: 'is',
    name: 'Fred'
  }, {
    id: 6,
    text: 'Hello',
    name: 'Yasmine'
  }, ]
}

// This is look like events.
const mutations = {
  UPDATEITEM(state, item) {
    var changedItem = state.items.find((checkItem) => {
      return checkItem.id == item.id;
    });
    if (item.text) {
      changedItem.text = item.text;
    } else if (item.name) {
      changedItem.name = item.name;
    }
  },
}

// This is store!!!.
const store = new Vuex.Store({
  state,
  mutations,
  getters: {
    items: function(state) {
      return state.items
    }
  },
  // Call action to dispatch 
  actions: {
    UPDATEITEM: function(store, item) {
      store.commit('UPDATEITEM', item)
    }
  }
})

// Vue 
const vm = new Vue({
  el: '#container',
  data: {
    id: 3,
    name: '',
    text: ''
  },
  store,
  methods: {
    changeName: function() {
      const item = {
        id: this.id,
        name: this.name
      };
      this.$store.dispatch('UPDATEITEM', item);

    },
    changeText: function() {
      const item = {
        id: this.id,
        text: this.text
      };
      this.$store.dispatch('UPDATEITEM', item);
    },
    getItemById: function(id) {
      var item = this.items.find((checkItem) => {
        return checkItem.id == id;
      });
      if (item) {
        return item;
      } else {
        return {
          name: ''
        };
      }
    }
  },
  computed: {
    items: {
      get() {
        return this.$store.getters.items;
      }
    }
  }
})

  .update-enter-active {
        transition: all .5s ease-in;
    }

    .update-leave-active {
        transition: all .5s ease-out;
    }

    .update-enter, .update-leave-to {
        opacity: .5;
        background-color: #fd0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="container">
  <ul>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>message</th>
        </tr>
      </thead>
      <tbody name="update" is="transition-group">
        <tr v-for="item in items" :key="item.id">
          <td>{{item.name}}</td>
          <td>{{item.text}}</td>
        </tr>
      </tbody>
    </table>

  </ul>
  <div>
    User id:
    <input v-model="id"> 
    {{getItemById(id).name}}
  </div>
  <div>
    Change Name:
    <input v-model="name" v-on:keyup.enter="changeName">
  </div>
  <div>
    Change Text:
    <input v-model="text" v-on:keyup.enter="changeText">
  </div>

</div>

오브젝트(텍스트, 이름)의 멤버로 이행할 수 없는 건가요, 아니면 제가 잘못하고 있는 건가요?

다음 키를 사용해 보십시오.

<td><transition name="update">
  <span :key="item.name">{{item.name}}</span>
</transition></td>

언급URL : https://stackoverflow.com/questions/46311952/vuejs-transitions-on-table-cells