如何在Nuxt中实例化变量

Question

我已经尝试了几种不同的方法来在Nuxt中实例化变量，但是这两种方法似乎都不起作用。我已经阅读了有关该主题的内容，并怀疑也许我想做的事情与Webpack不兼容，但是我不确定如何做。

首先在脚本部分中导出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>