主页 / 问题 / 1406177
Accepted
Cygnus_bewickii
Asked:2022-07-03 21:11:26 +0000 UTC2022-07-03 21:11:26 +0000 UTC

单击 v-for 中的元素时如何更改 data() 中的数据？

  • 772

最近开始研究vue，但是遇到一个问题：通过v-for组件，在这个组件上挂一个监听器，希望通过把被点击的卡片的id放在里面来“选择”这个元素activeItem，但最终单击时没有任何变化。 主要组件代码：

<template>
  <div v-for="card in cards" :key="card.id">
    <Cards :Card="card" @click="this.activeItem = card.id"></Cards>
  </div>

</template>


<script>
import Cards from "@/components/Cards";
export default {
  name: 'App',
  components: {
    Cards
  },
  data() {
    return {
      cards: [
        {id: 1, name: 'first', description: 'card 1'},
        {id: 2, name: 'second', description: 'card 2'},
        {id: 3, name: 'third', description: 'card 3'}
      ],
      activeItem: 0,
    }
  },
  computed: {
  },
  methods: {
    
  }
}
</script>

<style>
</style>

这是卡片组件代码：

<template>
  <div>
    {{Card.id}}
  </div>
  <div>
    {{Card.name}}
  </div>
</template>

<script>
export default {
 
  name: 'Cards',
  props: {
    Card: Object,
  }
}
</script>

<style scoped>

</style>

javascript vue.js

1 个回答

  1. Best Answer

    您正在将处理程序附加到自定义组件，因此该组件应负责使用内置的$emit方法引发事件，并将事件名称传递给它。

    在您的情况下，将处理程序添加到组件的顶部元素并$emit('click')在帮助下调用从父组件传递的方法就足够了，您可以将id卡片作为第一个参数传递：

     <div @click="$emit('click', card.id)">

    另请注意，每个组件Vue必须包含一个根元素：

    <template>
  <div>
   <div>
     {{Card.id}}
   </div>
   <div>
     {{Card.name}}
   </div>
  </div>
</template>

    工作示例：

    const card = Vue.component = {
  name: 'card',
  props: {
    card: Object,
  },
  template: `
  <div @click="$emit('click', card.id)">
    <div>
      {{card.id}}
    </div>
    <div>
      {{card.name}}
    </div>
  </div>
`
}
new Vue({
  el: '#app',
  name: 'App',
  components: {
    card
  },
  data() {
    return {
      cards: [{
          id: 1,
          name: 'first',
          description: 'card 1'
        },
        {
          id: 2,
          name: 'second',
          description: 'card 2'
        },
        {
          id: 3,
          name: 'third',
          description: 'card 3'
        }
      ],
      activeItem: 0,
    }
  },
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p>
    activeItem = {{ activeItem }}
  </p>
  <div v-for="card in cards" :key="card.id">
    <Card :Card="card" @click="(val) => activeItem = val"></Card>
  </div>
</div>

    第二种选择是通过对指令应用修饰符来使用本机事件：.nativev-on

    @click.native="activeItem = card.id"


    const card = Vue.component = {
  name: 'card',
  props: {
    card: Object,
  },
  template: `
  <div>
    <div>
      {{card.id}}
    </div>
    <div>
      {{card.name}}
    </div>
  </div>
`
}
new Vue({
  el: '#app',
  name: 'App',
  components: {
    card
  },
  data() {
    return {
      cards: [{
          id: 1,
          name: 'first',
          description: 'card 1'
        },
        {
          id: 2,
          name: 'second',
          description: 'card 2'
        },
        {
          id: 3,
          name: 'third',
          description: 'card 3'
        }
      ],
      activeItem: 0,
    }
  },
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p>
    activeItem = {{ activeItem }}
  </p>
  <div v-for="card in cards" :key="card.id">
    <Card :Card="card" @click.native="activeItem = card.id"></Card>
  </div>
</div>

    一个示例Vue 3（除了语法之外的所有内容，仅在您需要订阅事件的子组件中click）emits: ['click'],：

    const app = Vue.createApp({
  data() {
    return {
      cards: [{
          id: 1,
          name: 'first',
          description: 'card 1'
        },
        {
          id: 2,
          name: 'second',
          description: 'card 2'
        },
        {
          id: 3,
          name: 'third',
          description: 'card 3'
        }
      ],
      activeItem: 0,
    }
  },
})

app.component('card', {
  props: {
    card: Object,
  },
  emits: ['click'],
  template: `
  <div @click="$emit('click', card.id)">
    <div>
      {{card.id}}
    </div>
    <div>
      {{card.name}}
    </div>
  </div>
`
})

app.mount('#app');
    <script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <p>
    activeItem = {{ activeItem }}
  </p>
  <div v-for="card in cards" :key="card.id">
    <Card :Card="card" @click="(val) => activeItem = val"></Card>
  </div>
</div>

    • 1

相关问题