开发者问题收集

v-on 处理程序中的错误：“TypeError：无法读取未定义的属性‘$createElement’”

2019-11-03
2171
html vue.js

我对非常​​简单的输入/输出代码有疑问。
我应该以 Newick 格式获取输入，然后使用它来创建树。
但我根本无法正确输入。

这是我的 HTML 代码 

<body class="sidebarBody">
  <div class="inputDiv">
    <div class="inputText">
      <textarea v-model="newick" class="newickIn" placeholder="Newick Format"></textarea>
    </div>
    <br />
    <button @click="render()">Render</button>
    <p>{{newick}}</p>
    <p>{{wtf}}</p>
  </div>
</body>
</template>

这是我的 JavaScript 代码 

<script>
export default {
  name: "Sidebar",
  data() {
    return {
      newick: "",
      wtf: "wtf"
    };
  },
  methods: {
    render() {
      this.wtf = this.newick;
      console.log(this.newick);
    }
  }
};
</script>

我使用 wtf 作为调试器，但即使这样也没有帮助我找出我做错了什么。

错误如下：

错误 1 

    vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$createElement' of undefined"

    found in

    ---> <Sidebar> at src/components/Sidebar.vue  
           <Main> at src/components/Main.vue  
             <App> at src/App.vue  
               <Root>

错误 2 

    vue.esm.js?efeb:1897 TypeError: Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-7d622f5c","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Sidebar.vue (0.84f365116a0d985da83b.hot-update.js:14), <anonymous>:3:16)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-7d622f5c","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Sidebar.vue (0.84f365116a0d985da83b.hot-update.js:14), <anonymous>:38:22)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at HTMLButtonElement.invoker (vue.esm.js?efeb:2188)
    at HTMLButtonElement.original._wrapper (vue.esm.js?efeb:7559)

所以我的问题是，即使（在我看来）我正确使用了 @click 并以正确的顺序创建了方法，代码也存在关于我的 newick 模型未定义的错误。我尝试了一个使用 vue 绑定和方法使用的真正简单示例（如下所示），并且它有效，所以我真的不知道我的代码出了什么问题。 

<div class="tree">
        <button @click="counter()">Count</button>
        <p>{{count}}</p>
    </div>
</template>

<script>
export default {
  name: "Visualization",
  data() {
    return {
      count: 0
    };
  },
  methods: {
    counter(){
      this.count++;
    }
  }
};
</script>
1个回答

首先，将 render() 函数命名为不同的名称。这是保留名称，因为 Vue 组件使用此名称来呈现您的模板。

第二件事，将方法的唯一名称传递给事件： 

    <button @click="display">Render</button>

它应该可以工作 :)

BigKamil5
2019-11-03