Блог

Я стараюсь сделать свое практическое приложение как можно более минимальным, как бы мне изменить свой метод, чтобы разрешить нескольким счетчикам использовать одну переменную состояния, но не изменять каждый счетчик при увеличении или уменьшении?

 <template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item">
      <div class="itemName">Item 1</div>
      <button @click="decreaseCount">Decrease</button>
      <div class="value">{{ count }}</div>
      <button @click="increaseCount">Increase</button>
    </div>
    <div class="item">
      <div class="itemName">Item 2</div>
      <button @click="decreaseCount">Decrease</button>
      <div class="value">{{ count }}</div>
      <button @click="increaseCount">Increase</button>
    </div>
  </div>
</template>
 

 <script>
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increaseCount() {
      this.count  = 1;
    },
    decreaseCount() {
      this.count -= 1;
    },
  },
};
</script>
 

Здесь у меня есть очень простой рабочий пример, в котором я оставил проблему в приложении — https://codesandbox.io/s/prod-hill-p6kum?file=/src/App.vue

Я попытался переименовать состояние в его собственную переменную, чтобы каждый счетчик имел свое собственное состояние, но когда я изменил это, счетчик не будет увеличиваться или уменьшаться

Пожалуйста, проверьте это

 <template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item">
      <div class="itemName">Item 1</div>
      <button @click="decreaseCount('counterOne')">Decrease</button>
      <div class="value">{{ counterOne }}</div>
      <button @click="increaseCount('counterOne')">Increase</button>
    </div>
    <div class="item">
      <div class="itemName">Item 2</div>
      <button @click="decreaseCount('counterTwo">Decrease</button>
      <div class="value">{{ counterTwo }}</div>
      <button @click="increaseCount('counterTwo')">Increase</button>
    </div>
  </div>
</template>
 

 <script>
export default {
  name: "App",
  data() {
    return {
      counterOne: 0,
      counterTwo: 0
    };
  },
  methods: {
    increaseCount(val) {
      this[val]  = 1;
    },
    decreaseCount(val) {
      this[val] -= 1;
    },
  },
};
</script>
 

Другой способ

 <template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item" v-for="(item, index) in items" :key="index">
      <div class="itemName">{{item.name}}</div>
      <button @click="decreaseCount(index)">Decrease</button>
      <div class="value">{{ item.counter }}</div>
      <button @click="increaseCount(index)">Increase</button>
    </div>
  </div>
</template>
 

 <script>
export default {
  name: "App",
  data() {
    return {
      Items: [
       { name: 'Item 1',  counter: 0 },
       { name: 'Item 1',  counter: 0 },
        ....... 
      ]
    };
  },
  methods: {
    increaseCount(val) {
      this.items[val].counter  = 1;
    },
    decreaseCount(val) {
      this.items[val].counter -= 1;
    },
  },
};
</script>