Question

javascript在呈现列表时看不到vuejs添加的新元素。

我创建了一个简单的代码，单击列表项后，它将在控制台中打印其对象：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    li {
      font-size: 35px;
      cursor: pointer;
      padding-bottom: 5px;
    }
    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="item in array">{{item}}</li>
    </ul>
    <button type="button" name="button" v-on:click="update">Update Array</button>
  </div>
</body>

<!-- VueJS Script -->
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        array: [1, 2, 3, 4]
      };
    },
    methods: {
      update: function () {
        app.array = [1, 2, 3, 4, 5, 6, 7, 8];
      }
    }
  })
</script>
<!-- JQuery Script -->
<script type="text/javascript">
  $("li").click(function () {
    console.log(this);
  });
</script>

</html>

仅当预先更新数组时，它才能正常工作；当我向数组中添加新元素时，JS无法处理新项目。为什么会这样？

Answer 1

jQuery将其单击处理程序绑定到jQuery代码运行时存在的li元素。当Vue以后添加新的li元素时，它们没有附加单击处理程序，因为Vue不知道您使用非Vue代码附加了它们。（出于相同的原因，Vue可能会对需要重建列表的DOM进行其他更新，甚至可能破坏最初具有它们的元素上的jQuery绑定。）

您可以通过使用jQuery运行时存在的父元素中的delegated event来解决此问题，并且该Vue以后不会修改：

$('#app').on("click", "li", function() {...})

...但是更好的解决方案是避免首先尝试混合jQuery和Vue代码，因此您不会遇到因它们在DOM控制上相互竞争而引起的这些问题。

将这些处理程序放到Vue中，该框架将在需要更新DOM时将它们包括在内：

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      array: [1, 2, 3, 4]
    };
  },
  methods: {
    update() { // <-- changed to ES6 arrow function shorthand, to preserve `this`
      this.array = [1, 2, 3, 4, 5, 6, 7, 8]; // `this` refers to the current component; you often won't have an external variable name like `app` to refer to here
    },
    handleClick(item) {
      console.log(item) // You probably want the data, not the DOM element (but if necessary the element would be the `event.target`)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in array" v-on:click="handleClick(item)">{{item}}</li>
  </ul>
  <button type="button" name="button" v-on:click="update">Update Array</button>
</div>

为什么Javascript无法看到VueJS创建的新元素？

1 个答案: