Category: Vue Answers

Categories
JavaScript Answers Vue Vue Answers

How to run a function on input but with a delay with Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to run a function on input but with a delay with Vue.js and JavaScript.

In this article, we’ll look at how to run a function on input but with a delay with Vue.js and JavaScript.

How to run a function on input but with a delay with Vue.js and JavaScript?

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input @input='onInput'>
      <div v-if='!isHidden'>hello</div>
    </div>
  `,
  data: {
    isHidden: true
  },
  methods: {
    onInput() {
      setTimeout(() => this.isHidden = false, 500);
    }
  }
})

to call onInput when the input event is triggered.

In onInput, we call setTimeout with a callback that sets this.isHidden to false to unhide the div after 500 milliseconds.

We use the v-if to only show the div with isHidden is false.

Conclusion

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

Categories
JavaScript Answers Vue Vue Answers

How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

In this article, we’ll look at how to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

First, we install a few packages into our Vue project by running:

npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-prettier

We install the ESLint with plugins for Vue projects.

Then we install extensions by pressing ctrl+shift+p in VS Code and search for ‘Extensions: Install Extension’.

Next, in the extensions search box on the left, we search for Prettier, ESLint, and Vetur and install them by clicking install.

After that, we press ctrl+shift+p in VS Code and search for ‘Preferences: Open Settings (JSON).

And then we paste the following into settings.json:

{
    "extensions.ignoreRecommendations": true,
    "[css]": {
        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
    },
    "files.eol": "\n",
    "files.trimTrailingWhitespace": true,
    "editor.renderControlCharacters": false,
    "editor.renderWhitespace": "none",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[scss]": {
        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "html.format.wrapLineLength": 80,
    "files.insertFinalNewline": true,
    "html.format.endWithNewline": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

to enable auto formatting and linting of Vue projects.

Finally, we create an .eslintrc.js file in the Vue project’s root and add:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ]
};

into the file to enable the extensions needed for auto linting and formatting.

Conclusion

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

Categories
JavaScript Answers Vue Answers

How to put focus on an input with Vue.js and JavaScript?

white seal on soil

Sometimes, we want to put focus on an input with Vue.js and JavaScript.

In this article, we’ll look at how to put focus on an input with Vue.js and JavaScript.

How to put focus on an input with Vue.js and JavaScript?

To put focus on an input with Vue.js and JavaScript, we can assign a ref to the input.

And then we can get the input with the ref and call focus to focus the input.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and an app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input ref='input'>
    </div>
  `,
  mounted() {
    this.$refs.input.focus()
  }
})

We add an input in the template and assign a ref to it by setting the ref prop to input.

Then in the mounted hook, we get the input with this.$refs.input.

And then we call focus on it the put focus on the input.

Conclusion

To put focus on an input with Vue.js and JavaScript, we can assign a ref to the input.

And then we can get the input with the ref and call focus to focus the input.

Categories
JavaScript Answers Vue Answers

How to disable space in input text with Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to disable space in input text with Vue.js and JavaScript.

In this article, we’ll look at how to disable space in input text with Vue.js and JavaScript.

How to disable space in input text with Vue.js and JavaScript?

To disable space in input text with Vue.js and JavaScript, we can prevent the default behavior of when the space key is pressed.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input @keydown.space.prevent>
    </div>
  `,
})

to add an input with the @keydown.space.prevent directive.

@keydown.space.prevent prevents the default behavior when pressing the space key.

Therefore, it’ll prevent space key press from adding a space to the input value.

Conclusion

To disable space in input text with Vue.js and JavaScript, we can prevent the default behavior of when the space key is pressed.

Categories
JavaScript Answers Vue Answers

How to get coordinates of a mouse click in Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to get coordinates of a mouse click in Vue.js and JavaScript.

In this article, we’ll look at how to get coordinates of a mouse click in Vue.js and JavaScript.

How to get coordinates of a mouse click in Vue.js and JavaScript?

To get coordinates of a mouse click in Vue.js and JavaScript, we can use get the properties of the mouse click event object.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div @click='onClick'>
    	click me
    </div>
  `,
  methods: {
    onClick(e) {
      console.log(event.clientX);
      console.log(event.clientY);
      
      console.log(event.pageX);
      console.log(event.pageY);
      
      console.log(event.screenX);
      console.log(event.screenY);
    }
  }
})

to add a div with a click handler.

When we click the div, onClick is run.

Then from the e parameter of onClick, we get the position of the click in various ways.

clientX and clientY give the coordinates of the mouse relative to the viewport in CSS pixels.

pageX and pageY give the coordinates of the mouse relative to the <html> element in CSS pixels.

screenX and screenY give the coordinates of the mouse relative to the screen in device pixels.

Conclusion

To get coordinates of a mouse click in Vue.js and JavaScript, we can use get the properties of the mouse click event object.