Jonas__G
Jonas__G

Reputation: 185

Change contents of mustache based on variable

Is it possible to change the contents of a mustache based on something else?

I have 3 different arrays and based on which one is "selected" I'd like to change the v-for loop (different key-names in the various arrays).

<template>
    <select>
        <option v-for="item in list" :value="item._id">{{ getList(value) }}
    </select>
</template>

<script>
export default {
    data: function() {
        return {
                value: 0
        }
    },
    methods: {
        getList: function(value) {
            if (value === 0) {
                var new_value = "item.name";
                return new_value; } 
            else {
                var new_value = "item.name2";
        }
    }
}

BTW: value is set somewhere else.

But, of course this only returns the string and so the value of new_value ends up being the value for all the options.

Sorry, I'm a real newbie and I'm in over my head...

Upvotes: 1

Views: 462

Answers (1)

skirtle
skirtle

Reputation: 29122

If you pass both item and value to getList:

{{ getList(item, value) }}

Then you can return the relevant name directly:

getList: function(item, value) {
    if (value === 0) {
        return item.name;
    }
    else {
        return item.name2;
    }
}

Upvotes: 1

Related Questions