Vue.js切换Font Awesome 5图标失效：值更新但图标未切换

Hey there! I see the issue you're facing—your backend data updates just fine, but the Font Awesome eye/eye-slash icons aren't switching when you click them. This is a common reactivity gotcha in Vue 2, and here's how to fix it:

The Root Cause #

Vue 2's reactivity system can't detect direct modifications to properties of objects inside an array when you use syntax like this.category.attributes[index].show = !.... Even though the value changes, Vue doesn't pick up on the update to trigger a re-render of your icons.

Solutions to Try #

1. Use $set (Recommended)

Vue provides the $set method to explicitly tell it to track changes to an object property. Update your showAttribute method like this:

showAttribute(index) {
  const currentValue = this.category.attributes[index].show;
  this.$set(this.category.attributes[index], 'show', !currentValue);
}

This method ensures Vue registers the property change and triggers the re-render your icons need.

2. Replace the Array Element

Another way to force reactivity is to create a copy of the attribute object, update the show property, and then replace the element in the array:

showAttribute(index) {
  // Create a shallow copy of the attribute object
  const updatedAttribute = { ...this.category.attributes[index] };
  // Toggle the show value
  updatedAttribute.show = !updatedAttribute.show;
  // Replace the old element with the updated one
  this.category.attributes.splice(index, 1, updatedAttribute);
}

This works because Vue can detect when you replace an item in an array using methods like splice.

3. Double-Check Initialization

Make sure your category.attributes array is initialized with the show property for each item in your component's data function. If show wasn't present when the component mounted, Vue might not have made it reactive in the first place. For example:

data() {
  return {
    category: {
      attributes: [
        { show: true, /* other properties */ },
        { show: false, /* other properties */ }
      ]
    }
  }
}

Modified Code Example #

Here's how your script would look with the $set solution:

<template>
  <!-- Your existing template code stays the same -->
  <a href="#" class="social-button" @click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
    <i class="fa fa-eye" v-if="category.attributes[index].show"></i>
    <i class="fa fa-eye-slash" v-else></i>
  </a>
</template>

<script>
export default {
  // ... other component options
  methods: {
    showAttribute(index) {
      const currentShow = this.category.attributes[index].show;
      this.$set(this.category.attributes[index], 'show', !currentShow);
    }
  }
}
</script>

Give one of these solutions a try—your icons should start toggling as expected once Vue detects the reactivity change!

内容的提问来源于stack exchange，提问作者user2538755