单击vue.js 2时如何添加星标？答案

【问题标题】：How to add star when clicked on vue.js 2?单击vue.js 2时如何添加星标？
【发布时间】：2017-02-28 15:53:41
【问题描述】：

我的看法是这样的：

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

当系统执行时，我想显示star = 3，当星星点击时，它显示星星

我在使用 vue.js 的时候还是一头雾水

我该怎么做？

【问题讨论】：

据我所知，星级组件上的:value="3" 是道具 - 我无法在任何地方看到星级组件道具数组？ props: ['value'] ?如果您可以制作 jsfiddle 或类似的东西，那就太好了。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

一种方法是在您的数据中添加一个默认值为 3 的星形变量，然后在表单输入绑定上遵循 vue.js docs 中的此示例。

会是这样的：

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

最后，您希望将星星发送到您的后端：

methods:{
        rate: function () {
        var star = this.star
            this.$http.post(window.BaseUrl + '/star', {star: star}).then(function (response) {
                console.log('submitted');
            });
        },

【讨论】：