如何定位特定的 vue 表元素？

Question

我正在设置一个从数据库中获取并显示订单列表的列表。 onclick 的按钮，我想仅在单击它的行中显示星级 div。如何使 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

首先，您应该从<tr @click="props.expanded = !props.expanded"> 元素中删除@click。

在您的 greet 函数中，您必须更改 expand 标志，例如：

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

由于您已经在使用 v-data-table expand 道具竞标 expand 状态，它应该可以工作

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

Answer 2

你试过了吗

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