如何通過使用模板

Question

與vuejs輸入字段綁定我是一個新的Vuejs

在下面的代碼中，我使用模板的2個實例，現在我要計算最終outcome.I試過，但它沒有工作。如果有人知道，那麼請幫助我。

HTML

<pre> 

<template id="input-template"> 

    <label for="{{name}}">{{label | capitalize}}</label> 
    <input type="text" id="{{name}}" class="form-control" name="{{name}}" v-model="name"/> 

</template> 

<form > 
    <input_box label="quantity" name="quantity" ></input_box> 
    <input_box label="price" name="price" ></input_box> 
    {{totalprice}} 
</form> 

JS

<script> 
new Vue({ 
    el:'body', 
    data:{ 
     message:'Hello world ' 
    }, 
    components:{ 
     input_box:{ 
      template:'#input-template', 
      props:['name','label'], 
      data:function(){ 
       return {name:''}; 
      }, 
      computed:{ 
       totalprice:function(){ 
        return this.price * this.quantity; 
       } 

      } 
     } 
    } 
}); 
</script> 
</pre> 

Answer 1

1. 你定義的數據不包含price和quantity

new Vue({ 
 
    el:'body', 
 
    data:{ 
 
     message:'Hello world ', 
 
     price: 0, 
 
     quantity: 0 
 
    }, 
 
    //... 
 
}

如果想從組件道具值的變化同步到父實例的數據，則必須使用.sync改性劑

<form > 
 
    <input_box label="quantity" name.sync="quantity" ></input_box> 
 
    <input_box label="price" name.sync="price" ></input_box> 
 
    {{totalprice}} 
 
</form>