如何使用vuetify v-rating事件?

时间:2019-10-31 19:04:34

标签: vue.js vuetify.js

在我的模板中,我构建了一些v-rating组件:

<div class="rating" v-for="rating in applicationViewCv.jobPostRatingFields" :key="rating.id">
    <label :for="rating.id">
      <b>{{rating.field}}</b>
    </label>
    <v-rating
      @input="addRating(Number, rating.id)"
      :value="rating.id"
      background-color="indigo lighten-3"
      color="indigo"
      :dense="true"
      :hover="true"
      size="15"
      :id="rating.id"
    ></v-rating>
  </div>

我需要获取事件中的选定值,并将其传递给addRating函数。 现在,当我记录(Number)时,它将传递给函数,它返回:

  

ƒNumber(){[本地代码]}

,如果我使用Number(),则无论我选择了什么,它总是返回零。 我通过下面链接中的文档来做到这一点:  https://vuetifyjs.com/en/components/ratings

注意:我不能使用v-model,因为我想获得等级的字段是动态的,因此我想为每个字段添加一个对象并将其推入数组并将该数组发送到服务器

1 个答案:

答案 0 :(得分:1)

您可以从输入事件中获得用户选择的评级值,但是应该使用

而不是使用Number。
toggleUploadButton()
  

在方法中

@input="addRating($event, rating.id)"

它会打印所选的评级值以及ID

此处工作的Codepen:https://codepen.io/chansv/pen/xxxPjNv?&editable=true&editors=101