Switch between object properties in Vue.js

Question

QUESTION

I would like to know how can I switch between object properties in Vue.js.

Here is a visual example:

var vm = new Vue({
    el: '#app',
    data:{
        myObject:{
            one: 'lorem',
            two: 'ipsum'
        }
    }
});

I want to be able to change from {{ myObject.one }} to {{ myObject.two }}, on the same place in the html, but I don't know if it's possible.

I have tried two solutions, but they require more code and resources:

1) repeat the html for every object property and use v-show

2) use only one property and change its content via ajax

Is there a better way that not requires multiple ajax calls or repeating html?

CONTEXT

I want to make a multilingual app, where the content changes clicking in a button. The code looks like this:

    <div id="app">
        <h1>{{ title.en }}</h1>
    <div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                title:{
                    en: 'Hello',
                    es: 'Hola'
                }
            }
        });
    </script>

I want to switch from {{ title.en }} to {{ title.es }}

Thank you very much

Thank you for the plugin @rmagnum2002! The problem is that the data structure has to be this one title{en:'hello',es:'hola'} instead of es:{title:'hola'},en:{title:'hello'} — rogervila
– rogervila, Commented Dec 24, 2015 at 16:21

Bill Criswell · Accepted Answer · 2015-12-22 18:59:02Z

2

You can set a lang variable to something like 'en' and use title[lang]. This will be the same as calling title.en.

new Vue({
  el: '#app',
  data: {
    lang: 'en',
    title: {
      en: 'Hello',
      es: 'Hola'
    }
  }
});

<div id="app">
  <ul>
    <li @click="lang = 'en'">English</li>
    <li @click="lang = 'es'">Spanish</li>
  </ul>
  <h1>{{ title[lang] }}</h1>
</div>

answered Dec 22, 2015 at 18:59

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rogervila Over a year ago

Thank you very much, this is exactly what I was looking for.

Collectives™ on Stack Overflow

Switch between object properties in Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related