Question

我正在建立一个从数据库中获取并显示订单列表的列表。 onclick，我只想在其单击的行中显示星级div。如何使Vue按钮仅在div所在的行中触发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

您尝试过

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

Answer 2

首先，应从@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"
>

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

2 个答案: