1
我试图让转换在VueJS中的表格单元格元素上工作，并让他们在对象中得到更改的项目上工作。我使用Vuex用于数据存储，而且我似乎无法让他们的工作无论是在单个细胞（See Fiddle 1)表格单元格上的VueJS转换
// 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>它是不可能与对象（文本，名称）的成员进行转换，还是我做错了什么？
为什么这个键（：键= “item.name”），而不是为：key = “item.id + '-name'” 不行？为什么当item.name的值在多行上相同时，我们看不到多个转换发生？ –
我不知道使用：过渡键，只是偶然发现！ （大声笑）。如果你把：key =“id”（局部变量），那么整个表在输入id变化时闪烁，所以我得出结论：key表示要观看的东西。 –
顺便说一句，谢谢你提供了一个小提琴来尝试。 –