时间戳

首页 > 解决方案 > 如何在 Nuxt js 中添加一个函数

nuxt.js - 如何在 Nuxt js 中添加一个函数

问题描述

我只是想在我的 vue 中添加功能。

我试过了，但没有成功，我不明白如何在 Nuxt.js 中做到这一点？

HTML

<input type="text" maxlength="255" id="mytext" onkeyup="write()" placeholder="Write something ..."/>
<div id="fontface1"></div>
<div id="fontface2"></div>

香草JS

function write() {
  document.getElementById("fontface1").innerHtml = 
  document.getElementById("mytext").value;
  document.getElementById("fontface2").innerHtml = 
  document.getElementById("mytext").value;
}

标签： nuxt.js

解决方案

以下是如何在按键时调用 Nuxt 中的函数。

<input type="text" maxlength="255" id="mytext" @keyup="write" placeholder="Write something ..."/>

<script>
export default {
  methods: {
    write() {
      console.log('writting here')
      // I do not show the equivalent of the vanillaJS code because this is not the way to go
    }
  }
}
</script>

然而，正如@omer 所说，你不应该像在 VanillaJS 中那样使用任何 querySelector，因为 VueJS 是声明式的（vanillaJS 是必须的）。您应该花时间阅读 VueJS 文档并使用您当前正在使用的框架所等待的状态，而不是摆弄选择元素并手动处理它们。

https://vuejs.org/v2/guide/

推荐阅读