Categories
Vue Answers

How to fix Vue js error: Component template should contain exactly one root element?

To fix Vue js error: Component template should contain exactly one root element, we should wrap our elements with one root element in our template.

For instance, we write

<div>
  <div class="form-group">...</div>

  <div class="col-md-6">...</div>
</div>

to wrap a div around the other divs to clear the error.

Categories
Vue Answers

How to get selected option on @change with Vue.js?

To get selected option on @change with Vue.js, we should use v-model to bind the selected value to a reactive property.

For instance, we write

<select
  name="LeaveType"
  @change="onChange($event)"
  class="form-control"
  v-model="key"
>
  <option value="1">Annual Leave/ Off-Day</option>
  <option value="2">On Demand Leave</option>
</select>
<script>
  const vm = new Vue({
      data: {
          key: ""
      },
      methods: {
          onChange(event) {
              console.log(event.target.value)
          }
      }
  }
</script>

to add a select drop down.

We bind the key reactive property to the value of the selected value of the drop down with v-model.

Also we can get the value from event.target.value from the change event handler.

Categories
Vue Answers

How to display unescaped HTML in Vue.js?

To display unescaped HTML in Vue.js, we can use the v-html directive.

For instance, we write

<template>
  <div id="logapp">
    <table>
      <tbody>
        <tr v-repeat="logs">
          <td v-html="fail"></td>
          <td v-html="type"></td>
          <td v-html="description"></td>
          <td v-html="stamp"></td>
          <td v-html="id"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

to set v-html to the reactive properties with the HTML we want to render dynamically.

Categories
Vue Answers

How to Scroll to an Element with Vue 3 and JavaScript?

To Scroll to an Element with Vue 3 and JavaScript, we can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.

For instance, we can write:

<template>
  <div id="app">
    <button @click="scrollToElement">scroll to last</button>
    <p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
      {{ n }}
    </p>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    scrollToElement() {
      const [el] = this.$refs.last;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

We have the scroll to last button that calls scrollToElement .

Then we have some p element with the last ref being assigned to the last p element.

In the scrollToElement method, we get the element assigned to the last ref with this.$refs.last via destructuring.

Then we call el.scrollIntoView with an object that has the behavior property to change the scroll behavior.

Categories
Vue Answers

How to fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js?

To fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js, we should make sure what’s referenced in the template is registered as a prop or defined as a reactive property.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "NameComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

to define the NameComponent component that has the name reactive property as defined in the object returned by the data method.

Then we reference name in the template to render name‘s value.