計算されたプロパティに基づいてVuejsの入力バインディング

私は、入力フィールドのvモデルのバインディングを、計算されたプロパティによって返される値によって決定するシナリオを持っています。計算されたプロパティに基づいてVuejsの入力バインディング

以下の例を参照してください：あなたは上記のコードで見ることができるように、私はので、私は、V-モデル= "value.firstを選択したvalue.firstにバインドされた最初のフィールドが欲しい

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="app" class="container-fluid"> 
    <h2>Input Binding</h2> 
    <p><b>First Name</b></p> 
    <input type="text" v-model="value.first" placeholder="Enter first name" /> 
    <p style="margin-top:20px;"><b>Second Name</b></p> 
    <input type="text" :v-model="lastName" placeholder="Enter last name" /> 
    <hr /> 
    <p>{{value.first}} {{value.second}}</p> 
    <hr /> 
    <p>Value of computed property: {{lastName}}</p> 
    </div> 
    <script> 
    new Vue({ 
     el: '#app', 
     data: function() { 
     return { 
      value: { 
      first:'', 
      second:''} 
     } 
     }, 
    computed: { 
     // a computed getter 
     lastName: function() { 
      return 'value.second' 
     } 
     }  
    }); 
    </script> 
</body> 
</html>

を" 2番目のフィールドでは、計算されたプロパティから返された値によってモデルバインディングを決定します。今は単純な例で、返される値は1つだけです（value.second）。しかし、これは論理上決定されるでしょう。

今私はそのバインディングをしようとすると、何も返されません。どんな助けでも大歓迎です。

次のようにあなたが computed setterを利用することができます

出典

2017-12-13 asanas

：

computed: { 
    lastName: { 
     get(){ 
      //perform your logic 
      return 'value.second' 
     }, 
     set(newValue){ 
      this.value.second = newValue; 
     } 

    } 
    }

今、あなたのテンプレートでv-modelとして、この計算されたプロパティを使用します。ここで

<input type="text" v-model="lastName" placeholder="Enter last name" />

ああfiddle

出典

2017-12-13 09:42:40

ですが、私はこれは彼が何を意味するのかであると思います。私はそれを理解するのに苦労した – samayo

こんにちはVamsi、これは私が望んだものです。私はそれが仕事をしていると思います。しかし、小さな問題があります。 2番目の入力フィールドには、 'value.second'が表示され続けます。何か入力すると、値2番目のデータプロパティに正しくバインドされます。しかしそれはvalue.secondのテキストに置き換えられます。これを修正するにはどうすればよいですか？ – asanas

@asanasあなたはロジックでもフィドルを再現できますか？ –

計算されたプロパティに基づいてVuejsの入力バインディング

答えて

関連する問題