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.
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>';
}
},
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;