Как настроить таргетинг на конкретный элемент таблицы VUE?

Question

Я настраиваю список, который выбирает из базы данных и отображает список заказов.onclick кнопки, я хотел бы показывать звездный рейтинг только в той строке, по которой щелкнули.Как заставить кнопку vue вызывать появление div только в той строке, в которой он находится.

Я пытался использовать функцию v-on:click= для вызова другой функции в js, но, похоже, не работал,Здесь оба шаблона содержатся в

    <div id="wrapper">
         <v-toolbar flat color="white">
              <v-toolbar-title style="font-family: 'Raleway', sans-serif;">Order 
               History</v-toolbar-title>
               <v-spacer></v-spacer>
               <d style="margin-right:20px;color:#a7a7a7;font-family: 'Raleway', 
               sans-serif;">click on an order for more information</d>
                         </v-toolbar>
                         <v-data-table
                            :headers="headers"
                            :items="orders"
                            :expand="expand"
                            item-key="number"
                            >
                            <template v-slot:items="props">
                               <tr @click="props.expanded = !props.expanded">
<!--trigger using this button-->   <td class="text-xs-left" style='font- 
                                    weight:400;'><v-btn v-on:click="greet" 
                                   class="dark">{{ props.item.review }}</v-btn> 
                                   </td>
                               </tr>
                            </template>
                            <template v-slot:expand="props" style="font- 
                               weight:500">
                               <v-data-table
                                  :items="[props.item]"
                                  :expand="expand"
                                  item-key="name"
                                  hide-actions
                                  >
                                  <template v-slot:headers="props">
                                  </template>
                                  <template v-slot:items="props">
                                     <td width="15%" class="text-xs-left" 
                                      style='font-weight:300;'>
<!--trigger this div  -->                    <div class="star-rating"></div>
                                     </td>
                                  </template>
                               </v-data-table>
                            </template>
                         </v-data-table>
                      </div>

// JS

var v = new Vue({
  el: '#app',
     methods: {
         greet: function () {
               $(".stars-rating").hide();
          }
      },
  data() {
    return {
      expand: true,
      headers: [
      {
        text: 'Order Number',
        align: 'left',
        sortable: false,
        value: 'number',
        width: '10%' },

      { text: 'Name/Message', value: 'name',
        align: 'left',
        width: '15%' },
      { text: 'Date/Start', value: 'date',
        align: 'left',
        width: '10%' },
      { text: 'Time/End', value: 'time',
        align: 'left',
        width: '10%' },
      { text: 'Provider/Receipts', value: 'provider',
        align: 'left',
        width: '10%' },
      { text: 'Amount/Labor', value: 'amount',
        align: 'left',
        width: '15%' },
      { text: 'Status/Tracking', value: 'status',
        align: 'left',
        width: '15%' },
      { text: 'Confirmation/Review', value: 'review',
        align: 'left',
        width: '15%' }],

      orders: [],

    };
  } });

Answer 1

Прежде всего, вы должны удалить @click из вашего <tr @click="props.expanded = !props.expanded"> элемента.

В вашей функции greet вы должны изменить флаг expand, например:

greet: function () {
	this.expand = false
}

Поскольку вы уже связываете состояние expand с опорой v-data-table expand, оно должно работать

<v-data-table
    :headers="headers"
    :items="orders"
    :expand="expand"
    item-key="number"
>

Answer 2

пробовали ли вы с

<div class="star-rating" v-if="props.expanded"></div>