What are the steps to deactivate data from a select option in Vue?

If a customer's status is marked as deceased, I need to prevent the selection of "healthy", "little healthy", and "unhealthy" options. How can I adjust the checkHealth method accordingly?

<template v-for= "customer in customers">
  <select v-model="selected" @change="checkHealthy(customer.statu)">
    <option v-for="statu in status" :value="statu.id" >{{statu.name}}</option>
  </select>
</template>

<script>
export default {
data(){
  return{
    status:[
        {id:1,name:'healthy'},
        {id:2,name:'little healthy'},
        {id:3,name:'unhealthy'},
        {id:4,name:'unknown'},
    ],
    selected:'',
    customers:[
      {name:'John', statu: "healthy"},
      {name:'Adam', statu: "unhealthy"},
      {name:'Cristiano', statu: "dead"},
      {name:'Alberto', statu: "little healthy"},
      {name:'Kevin', statu: "healthy"},
    ]
  }
},
  methods:{
  checkHealthy(statu){
    
  }
}
}
</script>

Answer №1

If I understood correctly, check out the code snippet below:

new Vue({
  el: '#demo',
  data(){
    return{
      options:[
          {id:1,name:'healthy'},
          {id:2,name:'little healthy'},
          {id:3,name:'unhealthy'},
          {id:4,name:'unknown'},
      ],
      selected:[],
      clients:[
        {name:'John', status: "healthy"},
        {name:'Adam', status: "unhealthy"},
        {name:'Cristiano', status: "dead"},
        {name:'Alberto', status: "little healthy"},
        {name:'Kevin', status: "healthy"},
      ]
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <template v-for= "client in clients">
    {{ client.name }}
    <select v-model="client.status">
      <option v-for="option in options"
              :value="option.name" 
              :disabled="client.status === 'dead' && option.name !== 'unknown'">
        {{option.name}}
      </option>
    </select>
  </template>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Twice the calls are being made by jQuery Ajax

I am using an <input> tag with the following attributes: <input type="button" id="btnSave2" value="Save" onclick="Event(1)" class="btn btn-primary col-lg-12" /> In addition, I have a script as ...

Select2 - Issue with AJAX causing search results to not display in dropdown

Currently using Select2 version 4.0.1. Implemented ajax to display results based on user input, but facing an issue where Select2 does not list any results despite receiving the proper response from ajax. Additionally, the input box loses focus after the ...

Switch up your code and toggle a class on or off for all elements that share a specific class

I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...

What are the different ways to utilize the Angular Loading Bar for specific waiting scenarios?

In the project I am currently working on, navigation is primarily done through Ajax loading of HTML templates. The Angular Loading Bar feature is proving to be quite effective in this setup, as it employs interceptors to keep track of most $http requests. ...

next.js retrieves information from Laravel

As part of my Laravel project, I have written a simple user registration feature with the following code: public function register() { $this->validate(request(), [ 'name' => 'required', 'email' => ...

Generating a menu in one-hour intervals

Could someone please advise on the best approach to generate a markup like the one below using Angular: <select> <option value="0000">00:00AM</option> <option value="0100">01:00AM</option> <option value="0200" ...

Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below? $('#myRange').on('input', function() { var nn = $(this).val(); $("img").css({ 'clip': ...

Link that causes the regular expression test to hang

My goal is to create a regular expression that can accurately identify URLs. I found the code snippet for this on Check if a Javascript string is a url. The code looks like this: function ValidURL(str) { var pattern = new RegExp('^(https?:\/&b ...

Tips for distinguishing between local and remote variables (PHPStorm, Webstorm)

Is there a way to create a dynamic variable within my project that can be accessed in both JavaScript and PHP, which will automatically populate based on settings in WebStorm before deployment (locally or remotely)? For instance, let's say I define th ...

What is the most effective method for retrieving a key and value from an Axios response object?

I currently have a Mongoose schema set up to store key:value pairs in a mixed type array, represented like this: Mongoose const budgetSchema = new Schema({ earnings: Number, expenses: [mongoose.Schema.Types.Mixed] }); budget:{ earning:1000, exp ...

I'm currently working on an if statement that checks for multiples of a specific number

I'm currently working on a coding exercise, but I've encountered an issue with my if/else structure and I can't figure out what's causing the problem. Below is the prompt for the exercise along with the code I have written: Your task ...

The NPM version needs to be updated as it is outdated

Struggling with a dilemma here. My Laravel project is quite dated, and I'm unable to execute npm run dev. Let's take a look at some code: php artisan laravel --version: Laravel Framework 5.8.38 node --version: v16.16.0 This is the current Node v ...

Exploring the process of fetching and showcasing API responses through AJAX

I need to pass the value of my car to an API, which is retrieved from the HTML below. After that, I would like to send this value to the API using AJAX. Finally, I want to display all the models in the same way as I displayed the cars. $(document).r ...

Interactive data visualization with hover-over details

I am utilizing datamaps to showcase the countries of the world, however, I want the graph to be centered. The issue arises when I hover over a country and the pop up appears all the way to the left, aligned with where the country would be if it wasn't ...

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

Utilizing styled components for retrieving JSON data with an alternate key identifier

import styled from "vue-styled-components"; const props = { type: String, action: Boolean }; const getter = () => { const permissionsList = JSON.parse(localStorage.getItem("UZ")).permissions; const type = props.type; const action = props.action; ...

How can we ensure that the load more button disappears at the appropriate moment in this Vue 3 application?

I have been developing a news application with Vue 3 and the News API. I am currently implementing a feature for loading more articles on the page. Initially, there are 24 articles displayed, and if there are more articles available than the current numbe ...

What is preventing me from viewing the curve on the browser when I run my code?

As a beginner in JavaScript, Three.js, and Computer Graphics, I have been assigned the task of drawing the Bezier Curve using the de-Casteljau Algorithm. I have written the following code, but it seems to not work properly when viewed in a browser. Can s ...

Need help with resetting a value in an array when a button is clicked?

Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked. component.ts names = [{name: f ...

Express route encountered an error with an undefined value

Here's the method declaration: exports.postRedisValue = function(req,res) { let keyRedis = req.body.key; let valueRedis = req.body.value; console.log(keyRedis); //displays as undefined if(keyRedis && valueRedis){ ...