Table 单元格上的 VueJS 转换

Question

我正在尝试让过渡处理 VueJS 中的 table 单元格元素，并让它们处理在对象内发生更改的项目。我正在使用 Vuex 作为数据存储，但我似乎无法让它们在单个单元格上工作（See Fiddle 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>

或在行 (See Fiddle 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>

是否无法对对象的成员（文本、名称）进行转换，还是我做错了什么？

Answer 1

试试这个键：

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

Table 单元格上的 VueJS 转换

VueJS Transitions on Table Cells

vue.js

transitions

vuex