1
J'essaie de faire en sorte que les transitions fonctionnent sur des éléments de cellule de tableau dans VueJS, et de les faire travailler sur des éléments qui sont modifiés dans un objet. J'utilise Vuex pour le magasin de données, et je ne peux pas sembler les amener à travailler soit sur la cellule individuelle (See Fiddle 1)Transitions de VueJS sur les cellules de table
// 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>ou sur un groupe de transition pour la ligne (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>Est-il simplement impossible de faire des transitions avec des membres d'un objet (texte, nom), ou est-ce que je fais quelque chose de mal?
Pourquoi cette touche (: key = "item.name"), et non: key = "item.id + '-name'" fonctionne pas? Et pourquoi quand la valeur de item.name est la même sur plusieurs lignes, ne voit-on pas plusieurs transitions? –
Je n'étais pas au courant de l'utilisation de: clé avec la transition, juste trébuché dessus! (LOL). Si vous mettez: key = "id" (le var local) alors la table entière clignote lors du changement de l'entrée id, donc je conclus: la touche indique la chose à regarder. –
BTW, merci de fournir un violon à expérimenter avec. –