Category: Vue Answers

Sometimes, we want to set initial Vuetify v-select value with Vue.js.

In this article, we’ll look at how to set initial Vuetify v-select value with Vue.js.

How to set initial Vuetify v-select value with Vue.js?

To set initial Vuetify v-select value with Vue.js, we set the value of the reactive property that’s bound to v-model to the value of the property that we set as the value of the item-value prop of the v-select.

For instance, we write

<template>
  <div>
    <v-select
      v-model="input.userId"
      :items="users"
      item-value="id"
      item-text="name"
      label="Users"
    />
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      input: {
        userId: 2,
      },
      users: [
        {
          id: 1,
          name: "John",
          last: "Doe",
        },
        {
          id: 2,
          name: "Harry",
          last: "Potter",
        },
        {
          id: 3,
          name: "Jane",
          last: "Smith",
        },
      ],
    };
  },
  //...
};
</script>

to set the input.userId reactive property to 2, which is value of the id property of the item in users that we want to be the default.

Therefore, ‘Harry Potter’ would be the default value since it has id 2 and item-value is set to id.

Conclusion

To set initial Vuetify v-select value with Vue.js, we set the value of the reactive property that’s bound to v-model to the value of the property that we set as the value of the item-value prop of the v-select.

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.

How to output a comma separated array with Vue.js?

To output a comma separated array with Vue.js, we can check the index of the item we’re rendering and add a comma if we aren’t rendering the first item.

For instance, we write

<template>
  <div>
    <span v-for="(element, index) in list" :key="element">
      <span v-if="index !== 0">, </span><span>{{ element }}</span>
    </span>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      list: ["john", "fred", "harry"],
    };
  },
  //...
};
</script>

to render the list items with v-for.

We add a comma before the element being rendered if the index of them element` isn’t 0 to add a comma before all items except the first.

Conclusion

To output a comma separated array with Vue.js, we can check the index of the item we’re rendering and add a comma if we aren’t rendering the first item.

Sometimes, we want to use console.log or console.error in a Vue.js template.

In this article, we’ll look at how to use console.log or console.error in a Vue.js template.

How to use console.log or console.error in a Vue.js template?

To use console.log or console.error in a Vue.js template, we can create a method that calls them and then call the method in our template.

For instance, we write

<template>
  <div>
    <input @keydown="debug" />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    debug(event) {
      console.log(event.target.value);
    },
  },
  //...
};
</script>

to define the debug method.

And then we set @keydown to debug to call it when we’re typing into the input.

Conclusion

To use console.log or console.error in a Vue.js template, we can create a method that calls them and then call the method in our template.

Sometimes, we want to import an SVG file to a Vue.js component.

In this article, we’ll look at how to import an SVG file to a Vue.js component.

How to import an SVG file to a Vue.js component?

To import an SVG file to a Vue.js component, we can add the vue-svg-loader Webpack plugin into our Vue project.

We install vue-svg-loader by running

npm install --save-dev vue-svg-loader

Then, we write

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ["babel-loader", "vue-svg-loader"],
      },
    ],
  },
};

in our Webpack config.

Then we can import SVGs as a module with

<template>
  <nav id="menu">
    <a href="...">
      <Icon class="icon" />
    </a>
  </nav>
</template>

<script>
import Icon from "@/assets/icon.svg";

export default {
  name: "menu",
  components: {
    Icon,
  },
};
</script>

We register the Icon SVG component, register it, and then add it into our template.

Conclusion

To import an SVG file to a Vue.js component, we can add the vue-svg-loader Webpack plugin into our Vue project.

Sometimes, we want to update Vue.js component on route change.

In this article, we’ll look at how to update Vue.js component on route change.

How to update Vue.js component on route change?

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.

For instance, we write

<script>
export default {
  //...
  methods: {
    beforeRouteUpdate(to, from, next) {
      const id = to.params.id;
      this.$http.get(id);
      next();
    },
  },
  //...
};
</script>

to add the beforeRouteUpdate to call this.$http.get when the component has changed.

The component is reused in the new route so all existing states are kept.

Conclusion

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.