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" キー）、およびない：キー= "item.id + '-name' が" 動作しませんか？なぜitem.nameの値が複数の行で同じになっても、複数の遷移が発生することはありませんか？ –
私は使用を意識していませんでした：トランジションのキー、ちょうどそれにつまずいた！ （笑）。あなたが：key = "id"（ローカル変数）を置くと、id入力の変更時にテーブル全体が点滅するので、私は結論しました：keyは監視するものを示します。 –
お試しいただきありがとうございます。 –