Unspecified error encountered in the VUE selection view

Question

Unspecified error encountered in the VUE selection view

I am facing an issue with the undefined value in the select view while attempting to add a new project. Could you suggest a solution? I tried using v-if but it didn't work for me.

This is how my code looks:

<v-select
            v-model="project.kierownik_id"
            :items="formattedUsers"
            :item-props="itemProps"
            item-text="_id"
            item-value="_id"
            label="kierownik:"
            track-by="project.kierownik_id"
></v-select>

addProject() {
    console.log(' (before let paylod) Adding project:', this.project);
    let payload = { ...this.project, kierownik_id: this.project.kierownik_id, };
    axios
      .post('/project', payload)
      .then((res) => {
        console.log('Adding project:', this.project);
        this.$emit('hideEditProject', res.data);
      })
      .catch((err) => {
        this.error.message = err.response.data.message + ': ' + err.response.data.error;
        this.error.show = true;
      });
  },

data() {
  return {
    project: {
      kierownik_id: null,
    },
    dataCorrect: true,
    users: {},
    error: { show: false, message: '' },
    confirmDelete: false
  }
},

I would like to eliminate the undefined value in the select view when adding a new project. Image

javascript vue.js

Answer 1

Answer №1

TEST THIS OUT

<template>
  <div>
    <v-select
      v-if="project.manager_id !== null"
      v-model="project.manager_id"
      :items="formattedUsers"
      :item-props="itemProps"
      item-text="_id"
      item-value="_id"
      label="manager:"
      track-by="project.manager_id"
    ></v-select>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const project = ref({
      // ...other project properties
      manager_id: null, // Provide a default value, like null
    });

    // Set up other data properties such as formattedUsers, itemProps, etc.

    // Monitor changes to project.manager_id and handle them accordingly
    watch(project.manager_id, (newValue, oldValue) => {
      // Respond to the change - save it in project or perform additional actions
    });

    return {
      project,
      // Expose any additional data properties to the template
    };
  },
};
</script>

Answer 2

TEST THIS OUT

<template>
  <div>
    <v-select
      v-if="project.manager_id !== null"
      v-model="project.manager_id"
      :items="formattedUsers"
      :item-props="itemProps"
      item-text="_id"
      item-value="_id"
      label="manager:"
      track-by="project.manager_id"
    ></v-select>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const project = ref({
      // ...other project properties
      manager_id: null, // Provide a default value, like null
    });

    // Set up other data properties such as formattedUsers, itemProps, etc.

    // Monitor changes to project.manager_id and handle them accordingly
    watch(project.manager_id, (newValue, oldValue) => {
      // Respond to the change - save it in project or perform additional actions
    });

    return {
      project,
      // Expose any additional data properties to the template
    };
  },
};
</script>

Unspecified error encountered in the VUE selection view

Answer №1

Similar questions

Creative Vue.js and Tailwind CSS card layout featuring an image extending beyond the boundaries of the card

Vue is set up to monitor changes in two connected input fields for user input exclusively

Using JQuery to Retrieve JSON Data from an HTTPS Endpoint

MongoDB was successfully updated, however the changes are not being displayed on the redirected

A guide to incorporating suspense and dynamic components into Vue 3

Interfacing Electron Frontend with Python Backend through seamless communication

AJAX is not meeting my expectations

Combining Django Templates and Vue.js

Enhance the focus on a textarea by adding specific text using VueJS/Vuetify

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

Integrate ThreeJs models into an Angular JS application

Tips for transferring objects from JavaScript/jQuery/angular to an action function

Using NodeJS to extract information from Opendata JSON files

Does CSS delayed visibility transition fail to activate JavaScript transitionend event for elements' visibility changes?

Can I add the object to the DOM and hold off on executing any events until the next

What is the best way to apply dynamic wrapping of a substring with a component in Vue.js?

PhpStorm flawlessly detects ES7 type hinting errors

Exploring the integration of Nuxt runtime config variables within Jest testing

What is the process for importing DataTables using npm?

Unsure if values can be imported from one component to another in Vue.js using props