Javascript 单击vue.js 2时如何添加星星？

我的看法是这样的：

<div class="col-md-8">
    ...
    <star-rating :value="3"></star-rating>
    ...
</div>

<template>
    <span class="rating">
        <template v-for="item in items">
            <label class="radio-inline input-star">
                <input type="radio" class="input-rating" name="input-rating" v-bind:value="item.value" @click="rate(item.value)">
            </label>
        </template>
    </span>
</template>
<script>
    export default{
        data(){
            return{
                items: [
                    {value: 5},
                    {value: 4},
                    {value: 3},
                    {value: 2},
                    {value: 1}
                ]
            }
        },
        methods:{
            rate: function (star) {
                this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
                    console.log('submitted');
                });
            },
        }
    }
</script>

...
...

我的组件星级如下：

<div class="col-md-8">
    ...
    <star-rating :value="3"></star-rating>
    ...
</div>

<template>
    <span class="rating">
        <template v-for="item in items">
            <label class="radio-inline input-star">
                <input type="radio" class="input-rating" name="input-rating" v-bind:value="item.value" @click="rate(item.value)">
            </label>
        </template>
    </span>
</template>
<script>
    export default{
        data(){
            return{
                items: [
                    {value: 5},
                    {value: 4},
                    {value: 3},
                    {value: 2},
                    {value: 1}
                ]
            }
        },
        methods:{
            rate: function (star) {
                this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
                    console.log('submitted');
                });
            },
        }
    }
</script>

导出默认值{
数据（）{
返回{
项目：[
{value:5}，
{value:4}，
{value:3}，
{value:2}，
{值：1}
]
}
},
方法：{
费率：功能（星型）{
这是.http.post（window.BaseUrl+'/star'，{star:star}）{
console.log（'submitted'）；
});
},
}
}

当系统执行时，我希望显示星号=3，当点击星号时，它显示星号

使用vue.js时我仍然感到困惑

---

如何操作？

一种方法是向数据中添加一个默认值为3的星型变量，然后在表单输入绑定中遵循此示例

它将是这样的：

<input v-for="item in items" type="radio" v-model="star" v-bind:value="item.value">
<span>Picked: {{ star }}</span> //for testing that the var changes.

据我所知，星级组件上的

：value=“3”

是道具-我在任何地方都看不到星级组件道具阵列<代码>道具：['value']？如果您可以制作JSFIDLE或类似的东西，那也会很好。