Category: Vue Answers

Sometimes, we want to output a comma-separated array with Vue.js.

In this article, we’ll look at how to output a comma-separated array with Vue.js.

Output a Comma-Separated Array with Vue.js

To output a comma-separated array with Vue.js, we can use the v-for directive.

For instance, we can write:

<template>
  <div id="app">
    <span v-for="(list, index) in lists" :key="list">
      <span>{{ list }}</span>
      <span v-if="index + 1 < lists.length">, </span>
    </span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      lists: ["Vue", "Angular", "React"],
    };
  },
};
</script>

We use the v-for directive to render the list array into a comma-separated list.

We add a comma only when index + 1 < lists.length so we only add the commas between the words.

A shorter way to render the words in the array into a comma-separated list is to use the array join method.

For example, we can write:

<template>
  <div id="app">
    <span>{{ lists.join(", ") }}</span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      lists: ["Vue", "Angular", "React"],
    };
  },
};
</script>

to combine the words with the join method in the template.

Either way, we get:

Vue, Angular, React

rendered on the screen.

Conclusion

To output a comma-separated array with Vue.js, we can use the v-for directive.

A shorter way to render the words in the array into a comma-separated list is to use the array join method.

Sometimes, we want to get the text of the selected option using Vue.js.

In this article, we’ll look at how to get the text of the selected option using Vue.js.

Get the Text of the Selected Option Using Vue.js

To get the text of the selected option using Vue.js, we can get the selected value by setting the value prop of the option element to an object.

Then we can bind the selected value prop to a reactive property with v-model .

For instance, we can write:

<template>
  <div id="app">
    <select v-model="selected">
      <option :value="p" v-for="p of products" :key="p.id">
        {{ p.name }}
      </option>
    </select>
    <p>{{ selected.name }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: {},
      products: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" },
      ],
    };
  },
};
</script>

We pass in p as the value of the value prop.

And we bind the selected option’s value prop value to the selected reactive property with v-model .

Then when we select an option from the dropdown, we can get its name property value to get the text of the selected option.

Conclusion

To get the text of the selected option using Vue.js, we can get the selected value by setting the value prop of the option element to an object.

Sometimes, we want to use the Axios HTTP client globally in our Vue app.

In this article, we’ll look at how to use the Axios HTTP client globally in our Vue app.

Using Axios Globally in a Vue App

To make Axios available globally, we can set it as the property of Vue.prototype before we create the Vue instance.

This way, it’ll be returned with the Vue instance if we create the Vue instance.

For example, we can write:

import Axios from 'axios'

Vue.prototype.$http = Axios;

Then in our components, we can access it by using the this.$http variable.

For instance, if we want to make a get request, we can write:

this.$http.get('https://example.com')

Conclusion

To make Axios available globally, we can set it as the property of Vue.prototype before we create the Vue instance.

Sometimes, we want to make any 2 components communicate with each other in our Vue.js app.

In this article, we’ll look at how to make any 2 components communicate with each other in our Vue.js app.

Communication Across Any Components

We can communicate between any components with the this.$dispatch method to dispatch an event that’s propagated to all components.

Then we can use this.$on to listen to the event that’s dispatched by this.$dispatch .

For example, we can write the following in one component:

export default {
  ...
  created() {
    this.$dispatch('child-created', this)
  }
  ...
}

Then in another component, we can write:

export default {
  ...
  created() {
    this.$on('child-created', (child) => {
      console.log(child)
    })
  }
  ...
}

We emit the event in the created hook so the event is emitted when the component is created but DOM content isn’t loaded yet.

In the 2nd component, we add the event listener in the created hook so that we can listen to events as soon as the component code is loaded.

child-created is the event name.

The child parameter has the event data in the 2nd argument of $dispatch .

Conclusion

We can communicate between any components with the this.$dispatch method to dispatch an event that’s propagated to all components.

Then we can use this.$on to listen to the event that’s dispatched by this.$dispatch .

Sometimes, we want to listen to changes in prop values in Vue.js components.

In this article, we’ll look at how to listen to changes in prop values in Vue.js components.

Listening to Props Changes

We can listen to props changes by using the watchers.

To add a watcher for a prop, we can add a method to the watch property.

For instance, we can write:

{
  ...
  props: ['myProp'],
  watch: {
    myProp(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  }
  ...
}

We have the watch property and the myProp prop as indicated by the props property’s value.

We just make a method with the same name as the prop with a signature that takes the new and old values respectively.

Then we get the newVal value to get the new value, and the oldVal value to get the old value.

To start watching immediately when the prop value is set, we can add the immediate property and set it to true .

For example, we can write:

watch: {
  myProp: {
    immediate: true,
    handler (val, oldVal) {
      // ...
    }
  }
}

Conclusion

We can listen to props changes by using the watchers.