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

Question

我尝试了几种不同的方法来在 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'

再次压缩。

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

Answer 1

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

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