"this is null" 当 v-select [NuxtJs] 发生变化时

Question

这是我的第一个 post！希望你能帮忙。所以我正在进行一些迁移到 nuxtJs 的新项目。

我的 v-select 和 v-model 有点问题，代码如下：

_id.vue:

<template>
  <v-container fluid white>
    <v-card>
      <v-card-title class="headline">
          TEST:
      </v-card-title>
      <v-card-text>
        <p>info :</p>
        <p>{{this.host.typeS}}</p>
        <v-select 
          v-model="this.host.typeS" 
          :items="this.fields.typeS" 
          item-value="value"   
          item-text="value" 
          dense outlined>
        </v-select>
      </v-card-text>
    </v-card>
  </v-container>
</template>

脚本

export default {
  name: 'EditPage',
  data() {
    return {
      tab: null,
      fields: [],
      host: {},
      tabHeaders: ["tab1", "tab2", "tab3", "tab4", "tab5", "tab6"]
    }
  },
  async fetch() {
    this.fields = await fetch("APIfields")
      .then(res => res.json());
    if (this.$nuxt._route.params.id) {
      this.host = await fetch("APIhost" + this.$nuxt._route.params.id).then(res => res.json());
    } else {
      this.host = {};
    }
  }
}

API 字段：

{"typeS": [{"value": "p","order": 100}, {"value":"v","order": 100}], 
      "otherThings": [{"value":"se", "order": 100},{"value":"sa", "order": 100}]}

APIhost/id:

{"typeS": "p", 
  "otherThings": "se"}

当一切运行时，我的 select 以值“p”启动，单击时我看到该字段可以具有的所有值。当我在 v-select 中尝试 selecting "v" 时，我被重定向到我的错误布局，并且控制台显示“类型错误：这是空的”。

没有 v-model，我没有任何错误，但是 v-select 没有 selected 值。

目标是基于现有主机初始化一个表单，更改表单中的数据，然后将其提交到数据库。该表格还应该用于创建新主机（空表格）

同样的错误出现在我的文本字段和复选框中。

你有什么想法或路线我可以关注吗？

Answer 1

在使用 vue 模板时不需要 this

<template>
  <v-container fluid white>
    <v-card>
      <v-card-title class="headline">
          TEST:
      </v-card-title>
      <v-card-text>
        <p>info :</p>
        <p>{{host.typeS}}</p>
        <v-select 
          v-model="host.typeS" 
          :items="fields.typeS" 
          item-value="value"   
          item-text="value" 
          dense outlined>
        </v-select>
      </v-card-text>
    </v-card>
  </v-container>
</template>

请注意，:items 采用数组，但您使用的是 fields.typeS，因此最好将数据中的字段设置为

fields: {}

因为它是一个对象

"this is null" 当 v-select [NuxtJs] 发生变化时

"this is null" when change in v-select [NuxtJs]

vue.js

nuxt.js