Category: Vue Answers

Sometimes, we want to access to data from methods with Vue.js.

In this article, we’ll look at how to access to data from methods with Vue.js.

How to access to data from methods with Vue.js?

To access to data from methods with Vue.js, we can use reactive properties.

For instance, we write

export default {
  data() {
    return {
      questions: [],
      sendButtonDisable: false,
    };
  },

  methods: {
    postQuestionsContent() {
      this.sendButtonDisable = true;
    },
  },
};

to add the sendButtonDisable reactive property and set its initial value to false in the data method.

Then we add the postQuestionsContent method that sets the sendButtonDisable reactive property to true.

Conclusion

To access to data from methods with Vue.js, we can use reactive properties.

Sometimes, we want to add condition in v-bind:style with Vue.js.

In this article, we’ll look at how to add condition in v-bind:style with Vue.js.

How to add condition in v-bind:style with Vue.js?

To add condition in v-bind:style with Vue.js, we can set the style prop to the style string we want.

For instance, we write

<template>
  <input
    type="text"
    v-bind:style="boolVariable ? 'border: 1px solid orange;' : 'border: none;'"
  />
</template>

to set the style prop to 'border: 1px solid orange;' if boolVariable is true and 'border: none;' otherwise.

Conclusion

To add condition in v-bind:style with Vue.js, we can set the style prop to the style string we want.

Sometimes, we want to scroll to bottom of div with Vue.js.

In this article, we’ll look at how to scroll to bottom of div with Vue.js.

How to scroll to bottom of div with Vue.js?

To scroll to bottom of div with Vue.js, we assign a ref to the element we want to scroll to and call scrollIntoView on the ref.

For instance, we write

<template>
  <div>
    <button @click="scrollToElement">scroll to me</button>

    <div ref="scrollToMe">
      <!-- content -->
    </div>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    scrollToElement() {
      const el = this.$refs.scrollToMe;

      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
  //...
};
</script>

to define the scrollToElement method that gets the div with the scrollToMe ref.

Then we call el.scrollIntoView if el isn’t null.

We call it with { behavior: "smooth" } to make the scrolling smooth.

And we set the click handler of the button to scrollToElement to do the scrolling on click.

Conclusion

To scroll to bottom of div with Vue.js, we assign a ref to the element we want to scroll to and call scrollIntoView on the ref.

Sometimes, we want to access external JSON file objects in Vue.js app.

In this article, we’ll look at how to access external JSON file objects in Vue.js app.

How to access external JSON file objects in Vue.js app?

To access external JSON file objects in Vue.js app, we can import the JSON with import and then use that as the value of a reactive property.

For instance, we write

<template>
  <div>
    <div v-for="data in myJson">{{ data }}</div>
  </div>
</template>

<script>
import json from "./json/data.json";

export default {
  data() {
    return {
      myJson: json,
    };
  },
};
</script>

to import the json array from the ./json/data.json file.

And then we set json as the value of the myJson reactive property.

Next, in the template, we loop through the myJson object and show the data of each entry.

Conclusion

To access external JSON file objects in Vue.js app, we can import the JSON with import and then use that as the value of a reactive property.

Sometimes, we want to navigate using vue router from Vuex actions.

In this article, we’ll look at how to navigate using vue router from Vuex actions.

How to navigate using vue router from Vuex actions?

To navigate using vue router from Vuex actions, we can call router.push.

For instance, we write

import router from "@/router";

//...

router.push({ name: "Home" });

to import the Vue Router object with import.

And then we call router.push with an object to navigate to the route with name set to 'Home'.

We can do this outside components.

Conclusion

To navigate using vue router from Vuex actions, we can call router.push.