在 VueJS 中获取 HTML 个创建的元素以使用 JQuery

Question

我有默认的用户列表和添加用户按钮，这会将用户添加到列表中。通过按下按钮创建的用户我想在用户添加到列表后立即标记为红色背景。为了让它我使用

this.$watch("list", function() {

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

});

用户删除时正常。当单击删除索引变量影响以前的行时。 https://jsfiddle.net/apokjqxx/37/ 如何重现：单击添加项目。然后删除创建的项目。托尼将有红色背景，但我只需要创建用户的红色背景。

如何获取已创建元素的 html 并仅在已创建元素 HTML 中使用 jquery？

Answer 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>

在 VueJS 中获取 HTML 个创建的元素以使用 JQuery

get HTML of created element in VueJS to use JQuery

jquery

vue.js

vuejs2