How to add more variables js vue-CodePudding

code below

methods: {
switch (typwik) {
  case 'T':
    console.log('<span ><i ></i>TOMATO!</span>');
    break;
  case 'N':
    console.log('<span ><i ></i>NASA!</span>');
    break;
  case 'U':
    console.log('<span ><i ></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.

CodePudding user response：

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 ><i ></i>TOMATO!</span>';
    case 'N':
      return '<span ><i ></i>NASA!</span>';
    case 'U':
      return '<span ><i ></i>UGANDA!</span>';
  }
},

CodePudding user response：

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;