如何在 Nuxt 中实例化一个变量

Posted 2023-02-22

【中文标题】如何在 Nuxt 中实例化一个变量

【英文标题】：How to instantiate a variable in Nuxt

【发布时间】：2020-08-13 20:56:29

【问题描述】：

我尝试了几种不同的方法来在 Nuxt 中实例化一个变量，但似乎都不起作用。我已经阅读了这个主题，并怀疑我正在尝试做的事情可能与 Webpack 不兼容，但我不确定如何。

这里是一段jsFiddle代码：jsfiddle.net/tutmoses/z2365g49/4

首先在脚本部分我导出dataSize：

<script>
export default 
   data()
      return 
         page_name: "Run Model",
         dataSize: 1296

      
   
</script>

然后在上面的 html 中，我尝试导入它，但没有渲染：

<div class="setting">
  <span class="setting-label">Training Size:</span>
  <input id="trainingSize" :value="dataSize"></input>
</div>

我也试过这个：

<div class="setting">
  <span class="setting-label">Training Size:</span>
  <input id="trainingSize" :value=  dataSize ></input>
</div>

...但值实例化为

我在没有绑定value 的情况下尝试了上述两个选项，但这也没有用。

我尝试过的另一种方法是在单独的文件中：

export const nnSettings = 
  dataSize: 1296

然后用这个导入它：

import nnSettings from '~/components/testindex.js'

再次压缩。

我导入该值的原因是因为其他值将从它计算。什么是标准、最好的方法？

【问题讨论】：

它没有解决问题，但我不认为那是因为你的答案是错误的。我认为代码中还有其他问题导致了问题，所以我正在尝试解决它。不幸的是，这意味着我无法验证您是否已解决。奇怪的是，表单框中根本没有出现任何内容。目前还是个谜……

【参考方案1】：

Nuxt (Vue) 使用v-model 绑定到表单输入。查看here 了解有关表单绑定的更多信息

<div class="setting">
  <span class="setting-label">Training Size:</span>
  <input id="trainingSize" v-model="dataSize"></input>
</div>

【讨论】：

这是代码的 jsfiddle：jsfiddle.net/tutmoses/z2365g49/4 我想知道它是否需要一个“值”，但文献似乎表明 v-model 也替换了“值”。感谢您的帮助。

@JackPutter 是你的全部吗？该示例根本不是一个 vue 项目。它只是 html 和 javascript 文件，无论如何它们都没有链接。我强烈建议你看看这个w3schools.com/whatis/whatis_vue.asp vue 的快速入门介绍。也去vue官网vuejs.org/v2/guide仔细过一遍。熟悉 vue 后，请查看 Nuxt 网站nuxtjs.org/guide/installation。