CODEWITHSUNDEEP
javascriptjsonlaravelvuejs2vue.js
Varcor
Varcor

Reputation: 69

Language in VueJS from JSON

I am trying to load locale language variables from a JSON Request (laravel generated) to VueJS since VueJS does not support locale out of the box. The ready function alert does not alert but the random text data variable does work. I know VueJS is loading correctly. There are no console errors and webpack compiles the vue. The lang array says empty and the lang.email shows blank. This is my issue. Any help appreciated.

const app = new Vue({
    el: '#app',
    data: {
      lang: [],
      randomtext: 'This is Random Text'
    },
    ready: function() {
      alert('THIS DOES NOT ALERT');
      this.getLanguage();
     },
     methods: {
       getLanguage: function() {
         this.$http.get('/lang/auth').then((response) => {
            this.$set("lang", response)
          }, (response) => {
            alert(response);
          });
       }
     }
});

the 'lang/auth'

{"email":"Email Address","password":"Password"}

my html:

 <h5 class="content-group">@{{ randomtext }}</h5> // This Works
 <input type="text" class="form-control" :placeholder="lang.email"> // This does not

Upvotes: 1

Views: 1173

Answers (2)

nibnut
nibnut

Reputation: 3127

Indeed, "ready" was deprecated in Vue.js 2

Try using "mounted" instead.

Upvotes: 1

Kornelius Kristian Rayani
Kornelius Kristian Rayani

Reputation: 121

First, Change ready: into mounted:

(Because, vuejs version 2 doesn't support it anymore)

Second, Instead of using this.$set use this.lang = response

Here is the full code https://jsfiddle.net/uqp7f4zL/

Upvotes: 0

Related Questions