Category: Vue Answers

To pass props as initial data in Vue.js, we can set the prop value as an initial value of a reactive property.

For instance, we write

<script>
export default {
  //...
  props: {
    record: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      recordLocal: { ...this.record },
    };
  },
  //...
};
</script>

to set the recordLocal reactive property to a copy of the record prop as its initial value.

We register the record prop in the props property.

Sometimes, we want to concatenate variable and text with Vue.js img src.

In this article, we’ll look at how to concatenate variable and text with Vue.js img src.

How to concatenate variable and text with Vue.js img src?

To concatenate variable and text with Vue.js img src, we can do the concatenation in the src prop.

For instance, we write

<template>
  <img :src="imgPreUrl + 'img/logo.png'" />
</template>

to set the src prop of the img element to the imgPreUrl + 'img/logo.png', which concatenates imgPreUrl and 'img/logo.png' together.

Conclusion

To concatenate variable and text with Vue.js img src, we can do the concatenation in the src prop.

Sometimes, we want to handle enter key press in Vue.js.

In this article, we’ll look at how to handle enter key press in Vue.js.

How to handle enter key press in Vue.js?

To handle enter key press in Vue.js, we use the @keyup directive.

For instance, we write

<div id="app">
  <input @keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

to set @keyup.enter to the onEnter method so that onEnter runs when we press enter in the input.

enter is modifier that makes the @keyup directive only listens to enter key presses.

Conclusion

To handle enter key press in Vue.js, we use the @keyup directive.

Sometimes, we want to pass a parameter to Vue @click event handler.

In this article, we’ll look at how to pass a parameter to Vue @click event handler.

How to pass a parameter to Vue @click event handler?

To pass a parameter to Vue @click event handler, we pass the arguments straight into the click event handler.

For instance, we write

<template>
  <table>
    <tr
      v-for="item in items"
      :key="item.contactID"
      @click="addToCount(item.contactID)"
    >
      <td>{{ item.contactName }}</td>
      <td>{{ item.recipient }}</td>
    </tr>
  </table>
</template>

<script>
//...
export default {
  methods: {
    addToCount(paramContactID) {
      //...
    },
  },
};
</script>

to set the click event handler to addToCount on the tr element.

We set it to call addToCount with the item.contactID value as its argument.

And we get the item.contactID value from paramContactID.

Conclusion

To pass a parameter to Vue @click event handler, we pass the arguments straight into the click event handler.

Sometimes, we want to get an element within a component with Vue.js.

In this article, we’ll look at how to get an element within a component with Vue.js.

How to get an element within a component with Vue.js?

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.

For instance, we write

<template>
  <div id="app">
    Parent.
    <span ref="someName" class="abc">Child Span</span>
  </div>
</template>

<script>
//...
export default {
  //...
  mounted() {
    const childSpanClassAttr = this.$refs.someName.getAttribute("class");
    console.log(childSpanClassAttr);
  },
  //...
};
</script>

to assign the someName ref to the span in the template.

Then we get the span in the mounted hook with

this.$refs.someName

And we can use any element method like getAttribute on the element returned by the ref.

Conclusion

To get an element within a component with Vue.js, we can assign a ref to the element we want to get.