즐겨찾기에 동영상 추가

즐겨찾기에 동영상 추가

제 홈페이지에는 3편의 영화(상점에서 전달받은 영화)가 있으며, 각각의 영화에는 fav 페이지에 추가 버튼이 있습니다.그래서 내가 하고 싶은 것은 Add movie to fav 버튼을 클릭해서 내가 좋아하는 페이지로 가면 영화가 있을 것이다.제가 Vue에 처음이라 코드가 최선이 아니라면 죄송합니다.추천서류라도 주시면 감사하겠습니다!

홈페이지:

<template>
  <div>
 <v-container>
   <v-layout row wrap>
     <v-flex lg4
   v-for="item in items" :key="item.id"
     >
       <v-card
         
    
    class="mx-auto my-12"
    max-width="374"
  >
    <template slot="progress">
      <v-progress-linear
        color="deep-purple"
        height="10"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-img
      height="250"
      :src="item.image"
    ></v-img>

    <v-card-title>{{item.title}}</v-card-title>

    <v-card-text>
      <v-row
        align="center"
        class="mx-0"
      >
        <v-rating
          :value="4.5"
          color="amber"
          dense
          half-increments
          readonly
          size="14"
        ></v-rating>

      </v-row>
    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-title>Description</v-card-title>

    <v-card-text>
     {{item.decsription}}
    </v-card-text>

    <v-card-actions>
      <v-btn class="ml-2"
        color="deep-purple lighten-2"
        text
        @click="favs(item.id)"
      >
       Add to Favs
      </v-btn>
       <v-btn class="ml-auto"
        color="deep-purple lighten-2"
        text
        @click="later(item.id)"
      >
       Add to Watch Later
      </v-btn>
    </v-card-actions>
  </v-card>
  
     </v-flex>
    
    
     
   </v-layout>
 </v-container>
  </div>
</template>
<script>
  export default {
    data () {
      return {
     

   
      }
    },
    methods: {
       favs(){
       this.$router.push({
          path: '/fav'
        })
       }
    },
    computed:{
      items(){
        return this.$store.state.items;
      }
    }
  }
</script>

fav 페이지:

template>
  <div>
 <v-container>
   <v-layout row wrap>
     <v-flex lg4
   v-for="item in items" :key="item.id"
     >
       <v-card
         
    :loading="loading"
    class="mx-auto my-12"
    max-width="374"
  >
    <template slot="progress">
      <v-progress-linear
        color="deep-purple"
        height="10"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-img
      height="250"
      :src="item.image"
    ></v-img>

    <v-card-title>{{item.title}}</v-card-title>

    <v-card-text>
      <v-row
        align="center"
        class="mx-0"
      >
        <v-rating
          :value="4.5"
          color="amber"
          dense
          half-increments
          readonly
          size="14"
        ></v-rating>

      </v-row>
    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-title>Description</v-card-title>

    <v-card-text>
     {{item.decsription}}
    </v-card-text>

    <v-card-actions>
      <v-btn class="ml-2"
        color="deep-purple lighten-2"
        text
        @click="favs"
      >
       Add to Favs
      </v-btn>
       <v-btn class="ml-auto"
        color="deep-purple lighten-2"
        text
        @click="later"
      >
       Add to Watch Later
      </v-btn>
    </v-card-actions>
  </v-card>
  
     </v-flex>
    
    
     
   </v-layout>
 </v-container>
  </div>
</template>
<script>
export default {
    data(){
        return {
            
        }
    },
    computed : {
        fav(){
            let check= this.$store.getters.item.filter(f=>{
        return f.id == item.id
      })
      return check
      }
        }
    
}
</script>

스토어:

 state: {
    items: [
      {id: 1,
      title:'Free guy',  
      image :'Free-Guy.png',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
    
    {id: 2,
      title:'true story',  
      image :'add.jpg',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
    
    {id: 3,
      title:'starwars',  
      image :'st.jpeg',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
    
    ]
 
  },
  getters :{
   items(s) {
     return s.items
   }
  },

실제로 정의하지 않으신 것 같군요items데이터 메서드에서 정의하거나 항목을 다음과 같이 바꿉니다.$store.state.items!

원하는 동작을 이해한 경우 다음을 시도해 보십시오.fav값어치items어레이를 설정합니다.

items: [
    {
        id: 1,
        title: 'Free guy',
        image: 'Free-Guy.png',
        description: 'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
        fav: false
    },
    {
        id: 2,
        title: 'true story',
        image: 'add.jpg',
        description: 'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
        fav: false
    },
    {
        id: 3,
        title: 'starwars',
        image: 'st.jpeg',
        description: 'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
        fav: false
    },

그런 다음 Add to fav를 클릭하면 이 부울의 상태를 true로 변경합니다.mutation

mutations {
    addToFav: (state, id) => {
         state.items[state.items.findIndex(item => item.id == id)].fav = true;
    }
}

이것을 호출하다mutation여기서

methods: {
    favs(id){
        this.$store.commit("addToFav", id)
        this.$router.push({
            path: '/fav'
        })
    }
},

그리고 fav 페이지에는 Colbrothers처럼 fav별로 필터링된 저장 아이템을 호출합니다.

computed: {
    items(){
        return this.$store.state.items.filter(item => item.fav);
    }
}

또는 특정 항목을 만듭니다.getter좋아하는 영화만 보다

언급URL : https://stackoverflow.com/questions/70190317/vue-add-movies-to-favourites