html 如何查看函数的输出？

nue99wik 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(159)

我有两个按钮。一个添加电影到本地存储，另一个从那里删除它。我做了一个函数，基本上切换按钮。如果电影被添加，它显示“删除”，如果电影没有被添加，它显示按钮“添加”。函数工作，但它不知道当布尔改变，所以按钮不改变。有人解释说，我应该使用手表属性，但是我该如何查看函数的输出呢？

<template>
    <div>
        <div class="card" v-for="movie in movies"
            :key="movie.id">
            {{movie.title}}
            {{movie.release_date}}
            <button v-show="!showButton(movie.id)" type="submit" @click="storeMovie(movie.id)" >
                Aggiungi
            </button>
            <button v-show="showButton(movie.id)" type="submit" @click="removeMovie(movie.id)">
                Rimuovi
            </button>
            
        </div>
        
        <div class="card" v-for="favourite in watchlist"
            :key="favourite.id">
            {{favourite.title}}
        </div>
    </div>
</template>

<script>
import axios from 'axios'

    export default {
        name: 'HomeComp',
        data () {
            return {
                movies: [],
                watchlist: [],
                movie: null,
            }
        },
        mounted () {
            axios
                .get('https://api.themoviedb.org/3/movie/popular?api_key=###&language=it-IT&page=1&include_adult=false&region=IT')
                .then(response => {
                    this.movies = response.data.results
                    // console.log(response.data.results)
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        watch: {
            switchButton(oldValue, newValue) {
                if (oldValue != newValue) {
                    this.showButton(id) = true;
                } //made an attempt here
            }
               
        },
        methods: {
            storeMovie(id) {
                const favouriteMovie = this.movies.find(movie => movie.id === id )
                this.watchlist.push(favouriteMovie);
                localStorage.setItem("watchlist", JSON.stringify(this.watchlist));
            },
            removeMovie(id) {
                const removedMovie = this.watchlist.find(movie => movie.id === id )
                const indexMovie = this.watchlist.indexOf(removedMovie);
                if (indexMovie > -1) { 
                   this.watchlist.splice(indexMovie, 1); 
                }

                localStorage.setItem("watchlist", JSON.stringify(this.watchlist));
            },
            showButton(id) {
                const favouriteMovie = this.watchlist.find(movie => movie.id === id )
                if (favouriteMovie && favouriteMovie.length > 0) {
                    return true
                } else{
                    return false
                }
            }
        },
    }
</script>

<style scoped lang="scss">

</style>

Html

来源：https://stackoverflow.com/questions/74706207/how-do-i-watch-the-output-of-a-function

1条答案

按热度按时间

tf7tbtn21#

一个更好的方法是直接在电影对象上存储正在或不在监视列表中存储的电影的状态。
然后使用计算的从电影列表中获取监视列表，而不是使用两个不同的数组。

<template>
  <div>
    <div class="card" v-for="movie in movies" :key="movie.id">
      {{movie.title}}
      {{movie.release_date}}
      <button v-show="!movie.toWatch" type="submit" @click="storeMovie(movie.id)">
        {{ movie.toWatch ? 'Rimuovi' : 'Aggiungi' }}
      </button>
    </div>

    <div class="card" v-for="favourite in watchList" :key="favourite.id">
      {{favourite.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeComp',
  data() {
    return {
      movies: [],
    }
  },
  computed: {
    // Get the watchList from the movies list
    watchList() {
      return this.movies.filter(movie => movie.toWatch)
    }
  },
  watch: {
    watchList(newWatchList) {
      // Update the localStorage whenever the list changes
      localStorage.setItem("watchlist", JSON.stringify(newWatchList));
    }
  },
  mounted() {
    // your axios call
  },
  methods: {
    storeMovie(id) {
      const favouriteMovie = this.movies.find(movie => movie.id === id)
      if (favouriteMovie) {
        // just reverse the boolean
        favouriteMovie.toWatch = !favouriteMovie.toWatch
      }
    },
  },
}
</script>

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何查看函数的输出？

1条答案

相关问题

热门标签

最新问答