Question

我对非常简单的输入/输出代码有疑问。
我应该以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作为调试器，但是即使那样也没有帮助我弄清楚我做错了什么。

以下是错误：

Error1

    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>

Answer 1

第一件事，名称render()的功能有所不同。这是保留名称，因为Vue组件使用此名称来呈现您的模板。

第二件事，仅将事件名称传递给事件：

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

它应该可以工作:)

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

1 个答案: