CODEWITHSUNDEEP
javascripthtmlvue.jsvariables
cdn2022
cdn2022

Reputation: 13

How to add more variables js vue

code below

methods: {
switch (typwik) {
  case 'T':
    console.log('<span class="ui green label"><i class="check icon"></i>TOMATO!</span>');
    break;
  case 'N':
    console.log('<span class="ui red label"><i class="x icon"></i>NASA!</span>');
    break;
  case 'U':
    console.log('<span class="ui red label"><i class="x icon"></i>UGANDA!</span>');
    break;
}
}

how to change this code to make it work after entering more than two values, for example: if I type T it will show "Tomato" if I type N it will show "NASA" and if I type U it will show "Uganda". At the moment it only works on two variables, if I type T it displays something and if I type something other than T it displays a different option.

Upvotes: 1

Views: 37

Answers (2)

Jo&#227;o
Jo&#227;o

Reputation: 101

You can use a computed property with a object for that, like this:

const names = {
    A: "Awesome",
    T: "Tomato",
    N: "Nasa",
};

var search = 'T';

return names[search] || 'Not found';

Take a look at this functional example that I made: https://codesandbox.io/s/xenodochial-butterfly-xsc67i?file=/src/App.vue:286-372

This way is more easy to mantain and more clean instead using a switch case;

Upvotes: 1

Reyno
Reyno

Reputation: 6505

You are pretty close, you just need to combine both of your attempts. In the first one you look at the value and return based on its outcome. While in the second you use a switch but you're not returning anything.

typwik: function(value) {
  switch (value) {
    case 'T':
      return '<span class="ui green label"><i class="check icon"></i>TOMATO!</span>';
    case 'N':
      return '<span class="ui red label"><i class="x icon"></i>NASA!</span>';
    case 'U':
      return '<span class="ui red label"><i class="x icon"></i>UGANDA!</span>';
  }
},

Upvotes: 1

Related Questions