Category: Vue Answers

Sometimes, we want to trigger events using Vue.js.

In this article, we’ll look at how to trigger events using Vue.js.

How to trigger events using Vue.js?

To trigger events using Vue.js, we can use refs.

For instance, we write

<template>
  <button type="button" @click="myClickEvent" ref="myBtn">Click Me!</button>
</template>

<script>
export default {
  methods: {
    myClickEvent() {
      const elem = this.$refs.myBtn;
      elem.click();
    },
  },
};
</script>

to assign the myBtn ref to the button.

Then in the myClickEvent method, we get the button with this.$refs.myBtn.

And then we call click on it to click it programmatically.

Conclusion

To trigger events using Vue.js, we can use refs.

Sometimes, we want to prevent form submission when pressing enter from a text input using Vue.js.

In this article, we’ll look at how to prevent form submission when pressing enter from a text input using Vue.js.

How to prevent form submission when pressing enter from a text input using Vue.js?

To prevent form submission when pressing enter from a text input using Vue.js, we use the prevent modifier.

For instance, we write

<input type="text" v-on:keydown.enter.prevent="addCategory" />

to add a keydown event handler that only handles presses of the enter key.

And we prevent the default submit behavior with prevent.

addCategory is called when we press enter.

Conclusion

To prevent form submission when pressing enter from a text input using Vue.js, we use the prevent modifier.

Sometimes, we want to bind the HTML title content with Vue.js.

In this article, we’ll look at how to bind the HTML title content with Vue.js.

How to bind the HTML title content with Vue.js?

To bind the HTML title content with Vue.js, we use the vue-meta package.

To install it, we run

npm i vue-meta

Then we use it by writing

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  metaInfo: {
    title: "Default Title",
    titleTemplate: "%s | My Awesome Webapp",
  },
};
</script>

We add the metaInfo.titleTemplate property to set the title template.

And we set the title to the page’s title.

The title will replace %s.

Conclusion

To bind the HTML title content with Vue.js, we use the vue-meta package.

Sometimes, we want to customize item-text in Vuetify v-select with Vue.js.

In this article, we’ll look at how to customize item-text in Vuetify v-select with Vue.js.

How to customize item-text in Vuetify v-select with Vue.js?

To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.

For instance, we write

<template>
  <v-select
    label="Names"
    v-model="name"
    :items="names"
    item-value="id"
    item-text="name"
    return-object
  >
    <template v-slot:selection="{ item }">
      {{ getText(item) }}
    </template>
    <template v-slot:item="{ item }">
      {{ getText(item) }}
    </template>
  </v-select>
</template>

<script>
export default {
  data: () => ({
    names: [
      { id: 1, name: "Paul", age: 23 },
      { id: 2, name: "Marcelo", age: 15 },
      { id: 3, name: "Any", age: 30 },
    ],
    name: null,
  }),
  methods: {
    getText: (item) => `${item.name} - ${item.age}`,
  },
};
</script>

to fill in the selection slot to customize the text for the selection.

And we fill in the slot:item slot to customize the text for the drop down options.

item has the entry in names array for the selection slot.

And item has the entry in names array being rendered in the drop down.

Conclusion

To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.

Sometimes, we want to add attribute dynamically in Vue.js.

In this article, we’ll look at how to add attribute dynamically in Vue.js.

How to add attribute dynamically in Vue.js?

To add attribute dynamically in Vue.js, we use v-bind.

For instance, we write

<template>
  <input
    type="text"
    :disabled="disabled"
    :placeholder="placeholder"
    v-model="value"
  />
</template>

to add the disabled and placeholder attributes dynamically.

:disabled is short for v-bind:disabled.

And :placeholder is short for v-placeholder.

We set disabled to the value of the disabled reactive property.

And we set placeholder to the value of the placeholder reactive property.

Conclusion

To add attribute dynamically in Vue.js, we use v-bind.