Javascript Vue增加和减少值一次（更换按钮）

我制作了一个组件，允许我在点击按钮后为每个用户添加一个点。我想另外启用对添加点的撤消（将值减少1）。添加点时，我希望按钮变为红色，并将文本更改为“删除点”。 这应该类似于将答案标记为有助于堆栈溢出（但没有否定点）。 我使用v-if=“user.title！==“Jason Oner”禁用此用户的添加点。 在这种情况下，我不知道如何解决这个问题

HTML:

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="900"
    >
  
      <v-list>
  
        <v-list-item
          v-for="user in users"
          :key="user.title"
        >
          <v-list-item-avatar>
            <v-img
              :alt="`${user.title} avatar`"
              :src="user.avatar"
            ></v-img>
          </v-list-item-avatar>
  
          <v-list-item-content>
            <v-list-item-title v-text="user.title"></v-list-item-title>
            <div class="points" v-text="user.points"></div>
          </v-list-item-content>
  
          <v-list-item-icon>
            <v-btn 
              v-if="user.title !== 'Jason Oner'"
              color="primary"
              @click.once="user.points++"
            >
              <v-icon left>
                mdi-plus
              </v-icon>
              Add point
            </v-btn>
          </v-list-item-icon>
        </v-list-item>
      </v-list>

    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    users: [
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
        title: 'Jason Oner',
        points: 5,
      },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
        title: 'Mike Carlson',
        points: 10,
      },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
        title: 'Cindy Baker',
        points: 15,
      },
      {
        avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
        title: 'Ali Connors',
        points: 20,
      },
    ],
  }),
})

---

您必须将当前用户（您）的投票结果存储在某个位置。通常情况下，这是在用户数组中的用户对象上。乙二醇

{
阿凡达：'https://cdn.vuetifyjs.com/images/lists/4.jpg',
标题：“阿里·康纳斯”，
分值：20分，
//备选方案：
haveIGivenPoint：错，
usersGivenPoints:[1,5,2]//表示具有给定点的用户ID
点数：[1,5,2]//您可以计算已给出点数的用户ID，而不是上面的点数
//等等…如何拯救这个州取决于你
},

当您选择了一种存储投票结果的方式时，您需要在按钮上使用以下信息：

mdi plus
加点
减mdi
撤销点

请查看这是否有帮助

HTML:

<div id="app">
<v-app id="inspire">
<v-card  class="mx-auto"  max-width="900">
    <v-list>
      <v-list-item  v-for="(user,index) in users" :key="user.title">
      <v-list-item-avatar>
        <v-img :alt="`${user.title} avatar`"  :src="user.avatar"></v-img>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title v-text="user.title"></v-list-item-title>
        <div class="points" v-text="user.points"></div>
      </v-list-item-content>
      <v-list-item-icon>
        <div v-if="user.add">
          <v-btn  v-if="user.title !== 'Jason Oner'" color="primary" @click="aab(index)">
            <v-icon left> mdi-plus </v-icon> Add point
          </v-btn>
        </div>
        <div v-else>
          <v-btn  v-if="user.title !== 'Jason Oner'" color="error" @click="aab(index)">
            <v-icon left> mdi-plus </v-icon> Del point
          </v-btn>
        </div>
      </v-list-item-icon>
    </v-list-item>
  </v-list>

 </v-card>
 </v-app>
 </div>

new Vue({
el: '#app',
vuetify: new Vuetify(),
methods:{
aab(ii)
{   let uu=this.users[ii];
  if(uu.add) {   uu.points++;uu.add=false;uu.sub=true  }
  else{ uu.points--; uu.add=true;uu.sub=false}
}
},

data: () => ({
users: [
  {
    avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
    title: 'Jason Oner',
    points: 5,add:true,sub:false,
  },
  {
    avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
    title: 'Mike Carlson',
    points: 10,add:true,sub:false,
  },
  {
    avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
    title: 'Cindy Baker',
    points: 15,add:true,sub:false,
  },
  {
    avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
    title: 'Ali Connors',
    points: 20,add:true,sub:false,
  },
],
}),
})