时间戳

首页 > 解决方案 > v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 '$createElement'”

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

问题描述

我对非常简单的输入/输出代码有疑问。
我应该得到一个 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 right 并以正确的顺序创建了一个方法，但代码对我的 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>

标签： htmlvue.js

解决方案

首先，名称render()功能不同。它是保留名称，因为 Vue 组件使用它来呈现您的模板。

第二件事，仅传递给事件的方法名称：

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

它应该工作:)

推荐阅读