Category: Vue Answers

Sometimes, we want to use local storage with Vue.js.

In this article, we’ll look at how to use local storage with Vue.js.

How to use local storage with Vue.js?

To use local storage with Vue.js, we can use the localStorage.getItem and localStorage.setItem methods.

For instance, we write

localStorage.getItem('YourItem')

in our component code to return the local storage entry with the 'YourItem' key.

And we write

localStorage.setItem('YourItem', response.data)

to call localStorage.setItem to save a local storage entry with key 'YourItem' and response.data as the entry’s value.

Conclusion

To use local storage with Vue.js, we can use the localStorage.getItem and localStorage.setItem methods.

Sometimes, we want to wait for the Facebook SDK to load in a Vue.js component.

In this article, we’ll look at how to wait for the Facebook SDK to load in a Vue.js component.

How to wait for the Facebook SDK to load in a Vue.js component?

To wait for the Facebook SDK to load in a Vue.js component, we can put the Facebook SDK initialization code in the created hook.

For instance, we write

<template>
  <div id="app">
    <div v-html="innerHtml"></div>
  </div>
</template>

<script>
//...
export default {
  //...
  created() {
    window.fbAsyncInit = () => {
      FB.init({
        appId: "1111111111",
        xfbml: true,
        version: "v2.7",
      });
      FB.getLoginStatus((response) => {
        console.log(response);
      });
    };

    ((d, s, id) => {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
  },
  //...
};
</script>

to add the Facebook SDK initalization code into the created hook.

And then we get the response from the getLoginStatus callback when the Facebook SDK is loaded.

Conclusion

To wait for the Facebook SDK to load in a Vue.js component, we can put the Facebook SDK initialization code in the created hook.

Sometimes, we want to render dynamic HTML elements in Vue.js.

In this article, we’ll look at how to render dynamic HTML elements in Vue.js.

How to render dynamic HTML elements in Vue.js?

To render dynamic HTML elements in Vue.js, we can use the v-html directive.

For instance, we write

<template>
  <div id="app">
    <div v-html="innerHtml"></div>
  </div>
</template>

<script>
//...
export default {
  //...
  computed: {
    innerHtml() {
      return "...";
    },
  },
  //...
};
</script>

to create the innerHtml computed property that returns a string with HTML code in it.

Then we render innerHtml into elements with

v-html="innerHtml"

Conclusion

To render dynamic HTML elements in Vue.js, we can use the v-html directive.

Sometimes, we want to use style tags inside Vue.js template and update from data model.

In this article, we’ll look at how to use style tags inside Vue.js template and update from data model.

How to use style tags inside Vue.js template and update from data model?

To use style tags inside Vue.js template and update from data model, we can create our own component.

For instance, we write

<template>
  <div id="app">
    <v-style> .stuff input { background: {{ bgColor }}; } </v-style>

    <input class="setting" type="text" v-model="bgColor" />
  </div>
</template>

<script>
Vue.component("v-style", {
  render(createElement) {
    return createElement("style", this.$slots.default);
  },
});

//...
export default {
  //...
};
</script>

to create the v-style component with Vue.component.

We call it with an object that has the render method that calls createElement to create a 'style' element with the default slot as its content.

Then we can use it by writing

<v-style> .stuff input { background: {{ bgColor }}; } </v-style>

Conclusion

To use style tags inside Vue.js template and update from data model, we can create our own component.

Sometimes, we want to add Vue.js event on window.

In this article, we’ll look at how to add Vue.js event on window.

How to add Vue.js event on window?

To add Vue.js event on window, we can call window.addEventListener in our Vue component’s methods.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    keyDown() {
      const activeElement = this.$refs.el;
      if (activeElement && !isNaN(event.key) && event.key > 0) {
        activeElement.innerHTML = event.key;
      }
    },
  },

  created() {
    window.addEventListener("keydown", this.keyDown);
  },

  destroyed() {
    window.removeEventListener("keydown", this.keyDown);
  },
  //...
};
</script>

to call window.addEventListener with the 'keydown' event and the this.keyDown method as the event handler callback in the created hook.

And then we call window.removeEventListener with the same arguments to clear the listeners in the destroyed hook to remove the listeners when the component unmounts.

Conclusion

To add Vue.js event on window, we can call window.addEventListener in our Vue component’s methods.