Question

的新人

在下面的代码中我使用了2个模板实例，现在我想计算最终结果。我已经尝试了但它没有用。如果有人知道那么请帮助我。

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

您定义的数据不包含price和quantity

＆＃13;

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

＆＃13;

如果您希望从组件的道具中更改值以同步到父实例的数据，则必须使用.sync修饰符

＆＃13;

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

＆＃13;

如何使用模板将输入字段与vuejs绑定

1 个答案: