Vue.js Vuejs我只想将我单击的tr标记的bookmarkStar更改为true

基本上，当我点击bookmarkExchange时，它会转到相应的函数，并将bookmarkStar切换为true，但随后每个tr都会切换。我只想切换我点击的那个。我是Vuejs的新手，我非常习惯使用Jquery，所以我现在被卡住了。如果有人能帮助我，我将不胜感激

    <template>
        <table>
          <thead>
            <tr>
              <th>
                <span class="thSearch">
                  <button v-on:click="showBookmark" type="button" class="btnBookmark" v-bind:class="{active:isActive}">
                    <i class="fas fa-star"></i>
                    <span>bookmark</span>
                  </button>
                  <button type="button" class="btnSearch">
                    <i class="fas fa-search"/>
                    <span>Search</span>
                  </button>
                  <input type="text" v-model="searchText" placeholder="Search...">
                  <button type="button" class="btnClear" title="Clear" v-if="searchText.length > 0" @click="searchText = ''">
                    <i class="fas fa-times"/>
                    <span>Clear</span>
                  </button>
                </span>
              </th>
              <th>#Coins</th>
              <th><em>$</em>Vol</th>
              <th>Top <em>$</em>Vol</th>
            </tr>
          </thead>
          <tbody>
            <tr v-bind:class="{bookmark:isBookmarked}" v-for="item in filterItems(exchangeLeft) " :key="item.ex_name">
              <td>
                <dl class="col3" @click="MobileDetailShow">
                  <!-- <dt v-if="image"><img src="@/assets/img/ico_coin.png" alt=""></dt> -->
                  <dt v-if="image"><img :src="item.ex_image" alt=""></dt>
                  <button v-on:click="bookmarkExchange" type="button" class="btnBookmark" v-bind:class="[{active:bookmarkStar}, item.ex_code]" v-if="display">    
         <i class="fas fa-star"></i>
                      <span>bookmark</span>
                    </button>
                  <dd>{{ item.ex_name }}</dd>
                  <dd>{{ item.ex_country }}</dd>
                </dl>
              </td>
              <td>{{ item.ex_cnt }}</td> 
              <!-- <td><em>$</em>{{ item.exchange_total }}<i>K</i></td> -->
              <td v-html="item.exchange_total"></td>
              <td>
                <!-- <span><img src="@/assets/img/ico_coin.png" alt=""> {{ item.coin_symbol }} : </span> -->
                <span><img :src="item.coin_icon_url" alt="">{{ item.coin_symbol }}</span>
                <!-- <span><em>$</em>45 <i>K</i></span> -->
                <!-- <span><em>$</em>{{ item.ex_max_vol24 }}<i>K</i></span> -->
                <span v-html="item.ex_max_vol24"></span>
              </td>
            </tr>
          </tbody>
        </table>
        <p><img src="@/assets/img/ico_info.png" alt=""> #Coins는 본 사이트에서 제공하는 해당거래소의 코인 수이며, 실제 해당거래소에 상장
        된 코인의 수와 다를 수 있습니다.</p>
        
          <!-- 모바일 상세 페이지 Start -->
          <div class="mobileDetail" v-if="isMobile.wrap">
              <SubHeader title="Exchanges Detail" @MobileDetailHide="MobileDetailHide"/>
              <div class="sectionRight" v-on:scroll.passive="handleScrollMobile">
                  <ExchangesRight v-bind:container="isMobile"/>
              </div>
          </div>
          <!-- 모바일 상세 페이지 End -->
        
        </template>

<script>
const OFFSET = 60;

import axios from 'axios'
import numeral from 'numeral-es6'
//import mcoinp from '@/assets/js/mcoinp.js'
//import CmnUtil from '@/assets/js/CmnUtil.js'
const GlobalLocale = {
    qSymbol: '$',
    rate: 1,
    lang: 'en',
    decimal: 'a', //['a': 3.14], ['b':3,14]
    langList: {},
    currList: {},
    currency: '100001'
}
var ex_cd = [];
var coinCd = [];
  let exchange_list_api = "http://192.168.1.115:18100/mpi/common/exchange/list";
  let coin_count_api = "http://192.168.1.115:18100/mpi/exchange/coin-exchange-count?exchange_list=28,31,11,13,26,21,8,5,34,37,1,2,3,9,10,12,17,18,19,22,23,24,25,29,30,32,35,36,39,40,41,42,43,44,45,46,47,48";
  let exchange_trade_data_api = "http://192.168.1.115:18100/mpi/exchange/trade-data";
  let coin_map_list_api = "http://192.168.1.115:18100/mpi/allcoin/coin-light";
export default {
  data () {
        return {
      ex_list: [],
      ex_coin: [],
      ex_trade: [],
      coin_info: [],
      exchangeLeft: [],
      searchText: "",
      isActive: false,
      isBookmarked: false,
      bookmarkStar: false,
      display: false,
      image: true,
      isMobile : {
          wrap: false,
          scrollDown: true,
          lastScrollPosition: 0,
      },
        }
    },
  computed: {

  },
  methods: {
    MobileDetailShow: function(){
      if(this.$windowWidth < 640){
        this.isMobile.wrap = !this.isMobile.wrap;
      }
    },
    MobileDetailHide: function() {
        this.isMobile.wrap = !this.isMobile.wrap;
    },
    handleScrollMobile: function(e) {
        if (e.target.scrollTop < 0) {
            return
        }
        if (Math.abs(e.target.scrollTop - this.isMobile.lastScrollPosition) < OFFSET) {
            return
        }
        this.isMobile.scrollDown = e.target.scrollTop < 500;
    },
    showBookmark: function(){
        console.log("bookmark");
        if(this.isActive == false){
            this.isActive = true;
            this.display = true;
            this.image = false;
        }else{
            this.isActive = false;
            this.display = false;
            this.image = true;
        }
    },
    bookmarkExchange: function(){
        console.log("bookmarkExchange")
        if(this.bookmarkStar == false){
            this.bookmarkStar = true;
            this.isBookmarked = true;
        }else{
            this.bookmarkStar = false;
            this.isBookmarked = false;
        }
    }

书签
搜寻
清楚的
#硬币
$Vol
前$Vol
书签
{{item.ex_name}
{{item.ex_country}
{{item.ex_cnt}
{{item.coin_symbol}
#硬币는 본 사이트에서 제공하는 해당거래소의 코인 수이며, 실제 해당거래소에 상장
된 코인의 수와 다를 수 있습니다.

常数偏移=60；
从“axios”导入axios
从“Digital-es6”导入数字
//从“@/assets/js/mcoinp.js”导入mcoinp
//从“@/assets/js/CmnUtil.js”导入CmnUtil
常量全局标度={
qSymbol:“$”，
比率：1，
朗:"嗯",，
小数点：“a'，/['a'：3.14]，“b'：3,14]
语言列表：{}，
currList:{}，
货币：100001
}
var ex_cd=[]；
var coinCd=[]；
让exchange_列出_api=”http://192.168.1.115:18100/mpi/common/exchange/list";
让硬币计数http://192.168.1.115:18100/mpi/exchange/coin-兑换计数？兑换清单=28,31,11,13,26,21,8,5,34,37,1,2,3,9,10,12,17,18,19,22,23,24,25,29,30,32,35,36,39,40,41,42,43,44,45,46,47,48”；
让exchange交易数据api=”http://192.168.1.115:18100/mpi/exchange/trade-数据”；
让硬币映射列表api=”http://192.168.1.115:18100/mpi/allcoin/coin-“轻”；
导出默认值{
数据（）{
返回{
ex_列表：[]，
ex_硬币：[]，
进出口贸易：【】，
硬币信息：[]，
exchangeLeft:[]，
搜索文本：“”，
I：错，
isBookmarked:false，
星星：错，
显示：假，
图片：没错，
伊斯梅尔：{
包装：错，
向下滚动：正确，
上次滚动位置：0，
},
}
},
计算：{
},
方法：{
MobileDetailShow:函数（）{
如果（此.$windowWidth<640）{
this.isMobile.wrap=！this.isMobile.wrap；
}
},
MobileDetailHide:函数（）{
this.isMobile.wrap=！this.isMobile.wrap；
},
手持式CrollMobile：功能（e）{
如果（e.target.scrollTop<0）{
返回
}
if（Math.abs（e.target.scrollTop-this.isMobile.lastScrollPosition）

我写了关于如何做到这一点的文章。如果你能把你的代码变成一个可行的应用程序，我可以看看。似乎你所有的变量都可以在data:object.I.e data（）中设置，{return{exu cd:[]，nexchange\u list\u api:URL/192.168.1.115:18100/mpi/common/exchange/list'，