CODEWITHSUNDEEP
vue.jsnuxt.js
shilvor
shilvor

Reputation: 3

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

this is my first post! Hope you can help. So I'm on some new project to migrate to nuxtJs.

I have some trouble with my v-select and v-model, here's the code:

_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>

script

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 = {};
    }
  }
}

responses

APIfields:

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

APIhost/id:

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

When everything run, My select is initiated with the value "p" and when clicked I see all the values this field can have. When I try selecting "v" in the v-select, I'm redirected to my error layout, and the console say "Type error: this is null".

Without the v-model, I don't have any error, but the v-select have no selected value.

The goal is to initialise a form based on an existing host, change the data inside the form and then submit it to the database. The form should also be used to create new hosts (empty form)

The same error appear in my textfields and checkboxes.

Do you have any idea or track I can follow?

Upvotes: 0

Views: 737

Answers (1)

Jimmar
Jimmar

Reputation: 4459

you don't need this when working on vue templates

<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>

note that :items takes an array but you are using fields.typeS so it's better to set field in data as

fields: {}

since it's an object

Upvotes: 1

Related Questions