Question

我有一个用ajax内容更新的HTML页面。我正在使用Vue.js进行一些动态的前端事件。

动态添加的元素不会与Vue.js实例交互，即使我尝试强制更新。

我怎么能这样做？

tblDef.Attributes = DB_ATTACHSAVEPWD
tblDef.Connect = strSQLAzureConnectionString
tblDef.RefreshLink

Answer 1

这不是你在Vue中添加元素的方式。您与Vue的合同是它将控制DOM，您将为它提供一个描述事物应该如何显示和工作的模型。

放开jQuery。如果您希望有条件地显示按钮，请使用控制其外观的变量，并将该变量设置为true。

如果您确实需要处理在Vue之外添加的DOM，那么您需要在新添加的元素上调用new Vue以将它们置于Vue的控制之下。

Answer 2

添加新功能clickable()，例如关注代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>

<div id="app">
  <button v-on:click="click()">click will console something</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    methods: {
      click: function() {
        console.log('clicked')
      },
    }
  });

  function clickable(){
    app.click();
  }

  setTimeout(function() {
    $('#app').append('<button onclick="clickable()">click here wont do anything</button>');
  }, 1000);
</script>

初始化后添加的Vue.js DOM不会交互

2 个答案: