0

ユーザーのデフォルトのリストがあり、ユーザーをリストに追加するボタンを追加します。ボタンを押して作成したユーザーは、一度に赤い背景としてマークしたいユーザーがリストに追加されました。使いこなすには

this.$watch("リスト", function() {

 this.$nextTick(function() {
   var index = this.list.length - 1;
   $(".wrapper .user:eq(" + index + ")").addClass('red');
 });

});

ユーザーの削除中は正常に動作します。クリックしてインデックス変数を削除すると、以前の行に影響します。 https://jsfiddle.net/apokjqxx/37/ 再現方法: Add itemをクリック。次に、作成したアイテムを削除します。トニーは赤い背景を持ちますが、作成されたユーザーのみに赤い背景が必要です。

作成された要素のhtmlを取得し、作成された要素HTMLでのみjqueryを操作するにはどうすればよいですか?

4

1 に答える 1

1

現時点では、list変数を変更すると、最後の項目が赤色になります。置くことで問題を解決できます

 this.$nextTick(function() {
   var index = this.list.length - 1;
   $(".wrapper .user:eq(" + index + ")").addClass('red');
 });

あなたのaddItems方法で。

ただし、代わりに、アイテムが新しいかどうかを示すフラグをリストに追加することをお勧めします. 次に、そのフラグを使用して、アイテムを赤くするかどうかを決定します。

var listing = Vue.extend({
  template: '#users-template',
  data: function () {
    return {
      list: [],
    }
  },
  created: function() {
    this.loadItems();
  },
  methods: {
  	itemClass: function(item) {
    	return item.isNew ? 'red' : '';
    },
    loadItems: function() {
      this.list = [
      	{
          name: 'mike',
          isNew: false,
        },
        {
        	name: 'arnold',
          isNew: false,
        },
        {
        	name: 'tony',
          isNew: false
        }
      ];
    },
    addItems: function() {
      this.list.push({
      	name: 'Viktor',
        isNew: true
      });
    },
    removeItemUser: function (item) {
      this.list.splice(this.list.indexOf(item), 1)
    },
  }
});


Vue.component('listing', listing);
var app = new Vue({
  el: ".lists-wrappers",
});
.user{border: 1px solid; cursor: pointer}
.red{background-color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.3/vue.js"></script>
<div class="lists-wrappers">
  <listing></listing>
</div>
      
<template id="users-template">
  <div class="wrapper">
    <button @click="addItems()">Add item</button>
    <div  v-for="item in list"  :class="['user', itemClass(item)]">
      <div>{{item.name}}</div>
      <button class="destroy" @click="removeItemUser(item)">X</button>
    </div>
  </div>
</template>

于 2016-11-24T23:31:36.080 に答える