Vue.js - 入力が空であれば出力値を変更するには

Question

私はvue.jsを使い慣れています 入力値が空の場合、プレースホルダにある同じ文字列に出力テキストを変更したいとします。私は空の入力ボックスを残す場合 はここに私の希望のコードも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) 

と

<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で、データは再び結合しません。 どうすればいいですか？ https://jsfiddle.net/je491vas/

Answer 1

@charithがほとんどその方法でした。データにプレースホルダーテキストを追加し、それを入力にバインドし、一致するデータがない場合は出力に表示する必要があります。

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

テンプレート

<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。

Answer 2

入力テキストが空の場合は、プレースホルダテキストを設定します。これはデフォルトで動作し、追加のロジックを書く必要はありません。これはプレースホルダの動作です。

参照してください以下のコード：静的なテキストを使用してv-bind:placeholder="placeholder"

：V-バインドを使用して

• ：あなたが上記のいずれかの方法でプレースホルダを定義することができ

  <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) 
  

  placeholder="please enter your first name"

Live Demo