Question

我尝试使用jquery动态地将vue组件附加到我的应用中。但没有任何反应，附加的元素也没有渲染。

<div id="app">


</div>

<script>
  Vue.component('my-component', {
     template: '<p>This is component</p>'
  });

  var Vue = new Vue({
    el: '#app'
  });

 $(document).ready(function(){
   $('#app').append('<my-component></my-component>');
 })
</script>

我希望的结果是，当<my-component></my-component>追加到#app时，会转到指定的模板。

Answer 1

处理此问题的正确方法是通过条件渲染：

<my-component v-if="value == value_after_ajax"></my-componment>

您可以将正确的条件放在 v-if 中，只有在ajax调用后需要时才显示模板。

在此处详细了解https://vuejs.org/v2/guide/conditional.html#v-if

Answer 2

这对我有用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <div id="agregame">

        </div>


        <button type="button" id="agregame_click">Add click</button>
  <button type="button" v-on:click="addForm()">Add Form</button>
</div>

<script>


var vm =new Vue({
    el: '#app',
  data: {
    range:0,
    questions:[]
  },

  methods: {
    addForm: function() {
        vm.questions.push({
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    })

        var Profile = Vue.extend({
  template:`
  <div id="mount-point">
<h3>Guest Content</h3>
  <ul>
    <li v-for="question in questions">
  {{question.firstName}}
    </li>
  </ul>
  </div>
`,
  data: function () {
    return {
         questions: vm.questions

            }
        }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')
    }
  }
})

jQuery(document).ready(function($) {
    $("#agregame_click").on("click", function(){

        $("#agregame").html('<div id="mount-point"></div>');
        vm.$forceUpdate()
         vm.$emit('my-form');
        alert()
    })
});


</script>
</body>
</html>

Answer 3

您可以使用动态组件 https://vuejs.org/v2/guide/components.html#Dynamic-Components

每份文件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

但是对于更改currentView，您可能还需要使用vue，使用按钮@click =＆＃34; currentView（＆＃39; posts＆＃39;）＆＃34;。

其他方式你可以使用总线来发出值，比如

var bus = new Vue();
$(document).ready(function(){
    bus.$emit('my-component');
})

但不确定你想要的是什么

Answer 4

您可以尝试以下方法：

var component = {
    template: '<p>This is component</p>'
};

Vue.component('my-component', component);
var myComponent = Vue.extend(component);
var component = new myComponent().$mount();

$('#app').append(component.$el);

如果您需要传递一些道具给道具

var component = new myComponent({
    propsData: {
        values: 'my-value'
    }
}).$mount();

积分：https://medium.com/@ezkeromar/append-some-vue-js-component-dynamically-to-the-dom-using-jquery-abb92f0425ce

使用jquery附加vue js组件

4 个答案: