使用动态名称引用JavaScript属性

Question

I'm using Vue.js and I am wondering how I can call a javascript property in a dynamic way. Let's say I pass an argument to a function like this:

filter: function(items) {
    this.countriesToFilter.splice(index, 1);
},

How can I replace the countries in my this.countriesToFilter call in a dynamic way so I end up with essentially:

this.itemsToFilter.splice(index, 1);

Answer 1

Maybe this way?

filter: function(items) {
    var whatToFilter = items + 'ToFilter';
    this[whatToFilter].splice(index, 1);
},

Answer 2

The answer is yes.

var name = "itemsToFilter";
var myArray = eval("this." + name);

// use myArray

You can also add a safety check so you don't call splice on undefined

if (typeof myArray != 'undefined') {
    myArray.splice(index, 1)
}

Answer 3

The only way I can imagine this working is if you pass a string to the function, and interpolate that string into the object-notation, using square-brackets:

filter: function(keyName) {
    this[keyName + 'ToFilter']splice(index, 1);
}

If your existing variable, items (from the question), contains a value of relevance within the function then you'd also need to pass that as an argument also:

filter: function(keyName, items) {
    this[keyName + 'ToFilter']splice(index, 1);
}