Question

我有一个产品的Vue组件收藏夹按钮。该按钮具有图像。如果产品已经是我的最爱，我想更改图像。所有这些都在后端检查并可以使用。

我的问题是this.route的方法checkfav不会改变。

图像src设置为"route"的组件按钮：

<template>
    <div>
        <button type="submit" class="button-favourite" v-bind:value="product" @click="setFav">
            <img :src="route" alt="favourite button" class="user-image user-image--small">
        </button>
    </div>
</template>

组件脚本：

export default {
  created() {
    this.checkFav()
  },
  data() {
    return {
      route: '/storage/icons/heart.png',
    }
  },
  props: ['product', 'user'],
  methods: {
    setFav() {
      axios
        .post(`../api/fav`, {
          product: this.product,
          user: this.user,
        })
        .then(response => {
          console.log(response.data), this.checkFav()
        })
    },
    checkFav() {
      axios
        .post(`../api/checkfav`, {
          product: this.product,
          user: this.user,
        })
        .then(response => {
          if (response.data == 'true') {
            console.log(response.data)
            this.route = '/storage/icons/fullheart.png'
          } else {
            console.log(response.data)
            this.route = '/storage/icons/heart.png'
          }
          //console.log(response.data);
        })
    },
  },
}

Answer 1

尝试使用beforeMounted挂钩，或编写let self = this并通过self.route = response.data设置路由

Vue组件数据的方法未更改

1 个答案: