Vue.js - How can I change output value if input is empty

Question

I'm new to vue.js. I want to change the output text to the same string that's in placeholder if input value is empty. Here is my desired code

<div id="form">
<input class="input-f" type="text" placeholder="please enter your first name" v-model="firstName">
<input class="input-l" type="text" placeholder="please enter your last name" v-model="lastName">
<div class="output">
  <p class="f">{{firstName}}</p>
  <p class="l">{{lastName}}</p>
</div>

vuejs with jquery

(function(window) {
var data = {
  firstName: "Stack",
  lastName: "Overflow",
}
var vm = new Vue({
  el: "#form",
  data: data,
  watch: {
    firstName: function(v) {
      if (!v) {
        $(".f").text($(".input-f").attr("placeholder"))
      }
    },
    lastName: function(v) {
      if (!v) {
        $(".l").text($(".input-l").attr("placeholder"))
      }
    }
  }

})
})(window)

Also, if I leave the input box empty, the data won't bind again. Please tell me how can I achieve it? https://jsfiddle.net/je491vas/

Bert · Accepted Answer · 2017-05-21 15:57:00Z

6

@charith was most of the way there. You should add your placeholder text to your data and then bind it to your inputs and show it in your output if the matching data isn't available.

let data = {
  firstName: "",
  lastName: "",
  lastNamePlaceHolder: "please enter your last name",
  firstNamePlaceHolder: "please enter your first name"
}
new Vue({
  el:"#form",
  data
})

Template

<div id="form">
  <input class="input-f" type="text" :placeholder="firstNamePlaceHolder" v-model="firstName">
  <input class="input-l" type="text" :placeholder="lastNamePlaceHolder" v-model="lastName">
  <div class="output">
    <p class="f">{{firstName || firstNamePlaceHolder }}</p>
    <p class="l">{{lastName || lastNamePlaceHolder}}</p>
  </div>
</div>

Example.

answered May 21, 2017 at 15:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yukinari Over a year ago

thank you so much. this is exactly what I wanted to do!

CuriousGuy · Accepted Answer · 2017-05-21 16:09:06Z

Hope that you want to set the placeholder text if the input text is empty. This works by default and you do not need to write any additional logic. This is the behaviour of placeholder.

Please refer the code below :

<div id="form">
    <input class="input-f" type="text" placeholder="please enter your first name" v-model="firstName">
    <input class="input-l" type="text" v-bind:placeholder="placeholder" v-model="lastName">
    <div class="output">
      <p class="f">{{firstName}}</p>
      <p class="l">{{lastName}}</p>
    </div>
  </div>

  (function(window) {
    var data = {
      firstName: "",
      lastName: "",
      placeholder:"please enter your last name"
    }
    var vm = new Vue({
      el: "#form",
      data: data
    })
  })(window)

You can define the placeholder in either of the above ways:

Using v-bind : v-bind:placeholder="placeholder"
Using static text : placeholder="please enter your first name"

Live Demo

Collectives™ on Stack Overflow

Vue.js - How can I change output value if input is empty

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related