如何在Vue中获取循环中项目的值？

Question

问题：

我正在试图弄清楚如何将点击的项目的值传递到另一个组件

---

请参阅codepen：https://codepen.io/anon/pen/zRXBNY

在右键单击触发项目的codepen菜单中

假设我们有一个循环（this迭代器组件），它显示了对象items的所有项目

<v-data-iterator
  :items="items"
  hide-actions
  class="ma-4"
>
  <v-flex
    slot="item"
    slot-scope="props"
    xs12 sm6 md4 lg3
  >
    <v-card @contextmenu="show" class="ma-3 elevation-4">
      <v-card-title>
        <h4>{{ props.item.name }}</h4>
      </v-card-title>
    </v-card>
  </v-flex>
</v-data-iterator>

我们在同一个.vue组件中也有this“menu”组件：

<v-menu 
  absolute
  offset-y 
  :position-x="x"
  :position-y="y" 
  v-model="showMenu"
>
  <v-list>
    <p class="white ma-3">menu for item: [TITLE]</p>
    <v-list-tile 
       v-for="item in menuItems" 
       :key="item.title" @click=""
    >
      <v-list-tile-title>
        {{ item.title }}
      </v-list-tile-title>
    </v-list-tile>
    <v-text-field 
      class="ma-3" 
      label="rename">
    </v-text-field>  
  </v-list>
</v-menu>

题：

我们如何触发菜单组件并传递其中特定项的数据（以便我们可以使用它）？作为一个例子，我把这个menu for item: [TITLE]段落在那里，我不明白我们如何传递点击项目的标题？

Answer 1

这对我来说似乎有些混乱（我对Vuetify不是很熟悉），但我想到的第一个解决方案是将item对象传递给处理程序。所以你的代码如下：

<v-card @contextmenu="show($event, props.item)" class="ma-3 elevation-4"></v-card>

然后，一旦事件被触发并调用处理函数，您就可以存储您单击的项目：

show (e, item) {
    this.selectedItem = item;
    e.preventDefault()
// ...

现在，您可以使用模型组件中的项目：

<v-list>
    <p class="white ma-3">
        menu for item: {{selectedItem.name}}
    </p>
//...

完整演示：

new Vue({
  el: '#app',
  methods: {
    show (e, item) {
      this.selectedItem = item;
      e.preventDefault()
      this.showMenu = false
      this.x = e.clientX
      this.y = e.clientY
      this.$nextTick(() => {
        this.showMenu = true
      })
    }
  },
  data: () => ({
    x: 0,
    y: 0,
    selectedItem: {},    
    showMenu: false,
    menuItems: [
      { title: 'copy' },
      { title: 'paste' },
      { title: 'delete' }
    ],
    items: [
        {
          value: false,
          name: 'Frozen Yogurt'
        },
        {
          value: false,
          name: 'Ice cream sandwich'
        },
        {
          value: false,
          name: 'Eclair'
        },
        {
          value: false,
          name: 'Cupcake'
        }
      ]
  })
})

<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app" >
  <v-app id="inner" class="grey lighten-3"> 
    <h1 class="ma-2 ml-4">right click on an item to trigger menu</h1>
<!--  ITEMS ON THE PAGE -->
    <v-data-iterator
      :items="items"
      hide-actions
      class="ma-4"
    >
      <v-flex
        slot="item"
        slot-scope="props"
        xs12 sm6 md4 lg3
      >
        <v-card @contextmenu="show($event, props.item)" class="ma-3 elevation-4">
          <v-card-title>
            <h4>{{ props.item.name }}</h4>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-data-iterator>
    
<!-- MENU COMPONENT -->
    <v-menu 
      absolute
      offset-y 
      :position-x="x"
      :position-y="y" 
      v-model="showMenu"
    >
      <v-list>
        <p class="white ma-3">menu for item: {{selectedItem.name}}</p>
        <v-list-tile 
           v-for="item in menuItems" 
           :key="item.title" @click=""
        >
          <v-list-tile-title>
            {{ item.title }}
          </v-list-tile-title>
        </v-list-tile>
        <v-text-field 
          class="ma-3" 
          label="rename">
        </v-text-field>  
      </v-list>
    </v-menu>
  </v-app>
</div>