动态附加vuejs内容:scope.test不是函数

时间:2016-07-11 04:54:15

标签: javascript vue.js

我正在尝试为以下场景找到可行的解决方案:

  1. vuejs将呈现其主要"内容第一;
  2. 当发生一些点击时,它会加载一些vuejs识别html(包括组件引用及其数据);
  3. 应该编译动态加载的vuejs部分html并将其插入到预定义的节点(挂载点)。
  4. 我现在正尝试使用$ mount功能试一试。 你可以查看这个小提琴http://jsfiddle.net/matiascx/cd35khy8/ 另外,我在这里粘贴代码:

    <div id="app">
      <button v-on="click: addNewElement()">Add custom Element</button> 
      <br />
      <div id="dynamicloaded"></div>
    </div>
    
    new Vue({
      el: '#app',
      data: {
        sampleElement: '<div><button v-on="click: test()">Test</button></div>'
      },
      methods:{
        addNewElement: function(){
          var vmtemp = Vue.extend({
                            template: this.sampleElement,
                            methods: {}
                       });
          new vmtemp().$mount(document.getElementById('dynamicloaded'));
        },
        test: function(){
           alert('Test');
        }
      }
    });
    

    vuejs总是抱怨:

    VM1881:3 Uncaught TypeError: scope.test is not a function
    

    我想知道这是因为错误的范围分配给新安装的内容。

    1. 如何解决?感谢@gurghet,他指出这个问题是由新安装的组件引起的。无法访问根范围内的测试功能。
    2. 这是实现该目标的建议方法(使用正确的范围动态编译和挂载计数) 感谢@gurghet,我提出了更多关于这张票的实际问题:
    3. 如何让父动态定义的测试函数可用于动态安装的组件? 4.为什么动态安装的组件与root vue实例没有子父关系?如何让他们拥有亲子关系?谢谢〜!

1 个答案:

答案 0 :(得分:1)

如果您调试应用程序,您会发现选项中不存在方法test。这是因为父亲的方法是

您应该直接在methods:{}

dynamicloaded中添加方法测试

http://jsfiddle.net/L25oqe5n/