Category: Vue

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.

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.

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.

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.

To disable input conditionally with Vue.js, we set the :disabled prop.

For instance, we write

<template>
  <input type="text" :disabled="!validated" />
</template>

to set the disabled prop to the negation of the validated reactive property.

The input will then be disabled when validated is false.