Understand Two Way binding in Vue JS – 4

In this lesson we will see example regarding , how to pass the data both the way. Two way data binding means: When the user types in the input , value gets updated to match the value in input . When you update value , the input element’s content updates to match value. Let see an example.

In this example whatever you have type in the input box, it will be reflect in the below paragraph tag. in the vueJS V-model is special tag use for two way binding.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="userevents">
      <h2>Events: Two Way Binding</h2>
      <button v-on:click="add(10)">Add 10</button>
      <button v-on:click="subtract(5)">Subtract 5</button>
      <p>Result: {{ counter }}</p>
      <input type="text" v-model="name">
      <button v-on:click="resetInput">Reset Input</button>
      <p>Your Name: {{ name }}</p>
    </section>
  </body>
</html>

app.js

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: "",
    };
  },
  methods: {
    setName(event, lastName) {
      this.name = event.target.value;
    },
    add(num) {
      this.counter = this.counter + num;
    },
    subtract(num) {
      this.counter = this.counter - num;
      // this.counter--;
    },
    resetInput() {
      this.name = "";
    },
  },
});

app.mount("#userevents");

style.css

* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #2196e4;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#userevents {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#userevents h2 {
  font-size: 2rem;
  border-bottom: 1px solid #ccc;
  color: #2196e4;
  margin: 0 0 1rem 0;
}

#userevents p {
  font-size: 1.25rem;
  font-weight: bold;
  border: 1px solid #2196e4;
  background-color: #2196e4;
  color: white;
  padding: 0.5rem;
  border-radius: 5px;
}

#userevents input {
  font: inherit;
  border: 1px solid #ccc;
}

#userevents input:focus {
  outline: none;
  border-color: #2196e4;
  background-color: #e4edfc;
}

#userevents button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #0355b3;
  background-color: #0355b3;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
  border-radius: 20px;
  margin: 0 1rem;
}

#userevents button:hover,
#userevents button:active {
  background-color: #0355b3;
  border-color: #0355b3;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}