时间戳

首页 > 解决方案 > 具有三个不同编号的按钮的 Vue 组件

javascript - 具有三个不同编号的按钮的 Vue 组件

问题描述

我有一个组件，它创建 3 个项目（框），每个项目内有 3 个按钮（我使用 v-for），每个按钮里面都有一个数字，当我点击它时我想更改按钮内的数字，但现在所有数字同时改变

<template>
  <div>
    <div class="box" v-for="message in messages" v-bind:key="message">
      <p>{{ message }}</p>
      <button class="btn" v-on:click="counter++">{{ counter }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "childComponent",
  data: function () {
    return {
      messages: ["item 1", "item 2", "item 3"],
      counter: 0,
    };
  },
};
</script>

<template>
  <div class="container">
    <h2>Soy el componente padre</h2>
    <child-component />
  </div>
</template>

<script>
import childComponent from "./Hijo.vue";

export default {
  name: "fhaterComponent",
  components: {
    childComponent,
  },
};
</script>

我有带孩子的父亲。我花了一整天的时间试图弄清楚如何去做，但我被困住了

标签： javascriptvue.js

解决方案

问题是按钮在数据中共享相同的属性。该组件将需要一个数据结构来独立跟踪消息中每个项目的计数器......

<template>
  <div>
    <div class="box" v-for="(counter, i) in counters" v-bind:key="i">
      <p>{{ counter.message }}</p>
      <button class="btn" v-on:click="counter.count++">{{ counter.count }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "childComponent",
  data: function () {
    return {
      messages: ["item 1", "item 2", "item 3"],
      counters: [],
    };
  },
  mounted () {
    this.counters = messages.map(message => ({ message, count: 0}));
    // so counters will be [ { message: "item 1" , count: 0 }, ... ]
  },
};
</script>

推荐阅读