添加弹出模式以对vue.js进行验证

Question

我正在尝试向vuetify vue.js中的表添加一个弹出窗口模式，但是它总是最终获得第一项的值。

问题出现在我尝试实现弹出模式的第4 <td>处。

它一直只获取列表的第一个元素。我觉得这很容易解决。.第四 <td>只是为了节省您的时间。

Vue模板：

<script>
        var model =  @Html.Raw(Json.Encode(Model))
</script>



<div id="app">
    <v-app id="inspire">
        <v-card>
            <v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn flat color="purple" href="/Home">Home</v-btn>
                    <v-btn flat color="purple">Inventory</v-btn>
                </v-card-actions>

                <v-spacer></v-spacer>

            </v-card-title>

        </v-card>


        <v-container grid-list-md text-xs-center>
            <v-layout>
                <v-flex xs8>

                    <v-card>

                        <v-card-title>
                            Un Added Lab Equipment
                            <v-spacer></v-spacer>
                            <v-text-field v-model="search"
                                          append-icon="search"
                                          label="Search"
                                          single-line
                                          hide-details></v-text-field>
                        </v-card-title>
                        <v-data-table :headers="Headers"
                                      :items="items"
                                      :search="search"
                                      item-key="equipment"
                                      hide-actions
                                      expand
                                      class="elevation-1">
                            <template slot="items" scope="props">
                                <td class="text-xs">{{ props.item.equipment }}</td>
                                <td class="text-xs">{{ props.item.location }}</td>
                                <td class="text-xs">{{ props.item.qty }}  </td>
                                <td>
                                    @*<a v-bind:href="props.item.pictureUrl">
                                        <i class="fa fa-info-circle fa-2x" style="color: rgb(159, 212, 172);"></i></a>*@
                                    <v-dialog v-model="dialog" lazy absolute>
                                        <i class="fa fa-info-circle fa-2x" style="color: rgb(159, 212, 172);" slot="activator"></i>
                                        <v-card>
                                            <v-card-title class="justify-center">
                                                <p class="headline">More Info  for '{{ props.item.equipment }}'</p>
                                            </v-card-title>
                                            <v-card-text>
                                                @*<v-img src="{{props.item.pictureUrl}}"
                                                    aspect-ratio="2.75"></v-img>*@ {{props.item.location}}
                                            </v-card-text>
                                            <v-card-actions>
                                                <v-spacer></v-spacer>
                                                <v-btn class="blue--text darken-1" flat="flat" v-on:click.native="dialog = false">No</v-btn>
                                                <v-btn class="blue--text darken-1" flat="flat" v-on:click.native="deleteRow(props.item)">Yes</v-btn>
                                            </v-card-actions>
                                        </v-card>
                                    </v-dialog>

                                </td>
                                <td class="text-xs">
                                    <button v-on:click="decrement(props.item.id)" :disabled="disabled == props.item.id ? true : false">
                                        <v-icon color="pink">remove</v-icon>
                                    </button>
                                    <button v-on:click="increment(props.item.id)" id="incrementButton" :disabled="disabled == props.item.id + '2' ? true : false">
                                        <v-icon color="green">add</v-icon>
                                    </button>
                                </td>


                            </template>
                        </v-data-table>
                    </v-card>
                </v-flex>

            </v-layout>
            <br />




        </v-container>


</div>

***Vue App:***

new Vue({
el: '#app',
data() {
    return {
        disabled: "",
        searchAdded: '',
        message: 'omae wa moo shindeiruu',
        dialog: false,
        notifications: false,
        sound: true,
        test: true,
        widgets: false,
        search: '',
        Headers: [
            { text: 'Equipment', value: 'equipment' },
            { text: 'Location', value: 'location' },
            { text: 'Qty', value: 'qty' },
            { text: 'MoreInfo', value: 'pictureUrl',  sortable: false, disabled: true },
            { text: 'Add or Remove', value: 'addo', sortable: false, disabled: true }
        ],
        HeadersAdded: [
            { text: 'Equipment', value: 'itemName' },
            { text: 'Location', value: 'location' },
            { text: 'Qty', value: 'quantity' },
            { text: 'Add or Remove', value: 'addo', sortable: false, disabled: true }
        ],
        items: [{ equipment: "beaker", location: 'Room 3535 drawer 21', qty: 21, id: '07f37f', pictureUrl: 'https://www.bhphotovideo.com/images/images2500x2500/Photographers_Formulary_09_0095_Glass_Beaker_600ml_231378.jpg' },
            { equipment: "ruler", location: 'Room 3535 drawer 10', qty: 7, id: '08f312', pictureUrl: 'https://images-na.ssl-images-amazon.com/images/I/41qUVuXt2AL.jpg' },
            { equipment: "flask", location: 'Room 2121 drawer 22', qty: 6, id: '09f37d', pictureUrl: 'https://images-na.ssl-images-amazon.com/images/I/316GJIEdJxL._SY445_.jpg' },
            { equipment: "vernier-caliber", location: 'Room 4125 drawer 21', qty: 12, id: '07g3hf', pictureUrl: 'https://static.grainger.com/rp/s/is/image/Grainger/2ZUF3_AS01?$mdmain$' }
                ],
        itemsAdded: []
    }

}

}）

Answer 1

通过将每个项目的v-model更改为v-dialog，我可以使它生效。

代码段位于下面，我也创建了CodePen Mirror here。

现在它为项目列表中的每个特定项目设置对话框的打开/关闭属性：

<v-dialog v-model="dialog[props.item.equipment]"...

激活器插槽现在看起来像这样：

...@click.stop="$set(dialog, props.item.equipment, true)" slot="activator"...

.. v-dialog的“关闭按钮”也必须修改为：

...@click.stop="$set(dialog, props.item.equipment, false)"...

这意味着我还必须将dialog道具中的data()更改为对象：

data() {
  return {
    ...
    dialog: {},
    ...
  }
}

---

代码片段：

new Vue({
  el: "#app",
  data() {
    return {
      disabled: "",
      searchAdded: "",
      message: "omae wa moo shindeiruu",
      dialog: {},
      notifications: false,
      sound: true,
      test: true,
      widgets: false,
      search: "",
      Headers: [
        { text: "Equipment", value: "equipment" },
        { text: "Location", value: "location" },
        { text: "Qty", value: "qty" },
        {
          text: "MoreInfo",
          value: "pictureUrl",
          sortable: false,
          disabled: false
        },
        {
          text: "Add or Remove",
          value: "addo",
          sortable: false,
          disabled: true
        }
      ],
      HeadersAdded: [
        { text: "Equipment", value: "itemName" },
        { text: "Location", value: "location" },
        { text: "Qty", value: "quantity" },
        {
          text: "Add or Remove",
          value: "addo",
          sortable: false,
          disabled: true
        }
      ],
      items: [
        {
          equipment: "beaker",
          location: "Room 3535 drawer 21",
          qty: 21,
          id: "07f37f",
          pictureUrl:"https://www.bhphotovideo.com/images/images2500x2500/Photographers_Formulary_09_0095_Glass_Beaker_600ml_231378.jpg"
        },
        {
          equipment: "ruler",
          location: "Room 3535 drawer 10",
          qty: 7,
          id: "08f312",
          pictureUrl: "https://images-na.ssl-images-amazon.com/images/I/41qUVuXt2AL.jpg"
        },
        {
          equipment: "flask",
          location: "Room 2121 drawer 22",
          qty: 6,
          id: "09f37d",
          pictureUrl: "https://images-na.ssl-images-amazon.com/images/I/316GJIEdJxL._SY445_.jpg"
        },
        {
          equipment: "vernier-caliber",
          location: "Room 4125 drawer 21",
          qty: 12,
          id: "07g3hf",
          pictureUrl: "https://static.grainger.com/rp/s/is/image/Grainger/2ZUF3_AS01?$mdmain$"
        }
      ],
      itemsAdded: []
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>


<div id="app">
    <v-app id="inspire">
        <v-card>
            <v-card-title>
                Un Added Lab Equipment
                <v-spacer></v-spacer>
                <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details>
                </v-text-field>
            </v-card-title>
            <v-data-table :headers="Headers" :items="items" :search="search" item-key="equipment" hide-actions expand
                class="elevation-1">
                <template slot="items" scope="props">
                    <td class="text-xs">{{ props.item.equipment }}</td>
                    <td class="text-xs">{{ props.item.location }}</td>
                    <td class="text-xs">{{ props.item.qty }}</td>
                    <td>
                        <v-dialog v-model="dialog[props.item.equipment]" lazy absolute>
                            <v-btn flat icon color="blue lighten-2"
                                @click.stop="$set(dialog, props.item.equipment, true)" slot="activator">
                                <v-icon>info</v-icon>
                            </v-btn>
                            <v-card>
                                <v-card-title>
                                    <div class="headline">More Info for '{{ props.item.equipment }}'</div>
                                </v-card-title>
                                <v-card-text>
                                    <v-img :src="props.item.pictureUrl" aspect-ratio="2.75"></v-img>
                                    {{props.item.location}}
                                </v-card-text>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn class="blue--text darken-1" flat="flat"
                                        @click.stop="$set(dialog, props.item.equipment, false)">No</v-btn>
                                    <v-btn class="blue--text darken-1" flat="flat"
                                        @click.native="deleteRow(props.item)">Yes</v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-dialog>
                    </td>
                    <td class="text-xs">
                        <button v-on:click="decrement(props.item.id)"
                            :disabled="disabled == props.item.id ? true : false">
                            <v-icon color="pink">remove</v-icon>
                        </button>
                        <button v-on:click="increment(props.item.id)" id="incrementButton"
                            :disabled="disabled == props.item.id + '2' ? true : false">
                            <v-icon color="green">add</v-icon>
                        </button>
                    </td>
                </template>
            </v-data-table>
        </v-card>
    </v-app>
</div>