Question

问题

嗨，开发人员，

我正在使用自己开发的API构建电影和电视连续剧的应用程序。我有一个问题，当我要访问视频部分时，因为season_list [season_selected-1] .episodes的值未定义，所以不允许我进入。

本节中有三个选项：

1个选项：选择季节
2选项：选择章节
3个选项：选择视频

如果我将javascripts season_list [season_selected - 1].episodes更改为javascripts season_list[season_selected - 1]，则可以进入该部分。

这是json的示例，特别是在season_list部分 https://cinemanight.chrismichael.now.sh/api/v1/search/elite

您会注意到season_list具有两个值，即season和Episodes。这就是为什么我需要使用season_list [season_selected-1] .episodes

错误

"vue.runtime.esm.js? 2b0e: 1888 TypeError: Cannot read property 'episodes' of undefined"

错误是指以下行

season_list[season_selected - 1].episodes

模板部分

<select class="container" v-model="season_selected">
   <option disabled value="">Temporadas</option>
   <option  v-for="(season , index) in Array.from({length: total_seasons}, (v , k) => k + 1)" :value="season" :key="index">
       {{ season }}
    </option>
 </select>

<select class="container" v-model="episode_selected">
    <option disabled value="">Episodios</option>
    <option v-for="(epis , index) in season_list[season_selected - 1].episodes" :value="epis" :key="index">
       {{ epis }}
    </option>
 </select>
<select class="container" v-model="option">
  <option disabled value="">Videos</option>
  <option v-for="(video , index) in serie_video.map(xs => xs.iframe)" :value="video" :key="index">
    {{ video }}
  </option>
</select>

脚本部分

<script>
  import {value , watch} from 'vue-function-api';
  import {useState , useStore , useRouter} from '@u3u/vue-hooks';

  export default{
    name: 'SerieVideo',
    setup(){
      const store = useStore();
      const {route} = useRouter();

      const state = {
        ...useState(['serie_video' , 'isLoading'])
      };

      const params = {
        id: value(route.value.params.id),
        title: value(route.value.params.title),
        sinopsis: value(route.value.params.sinopsis),
        extra: value(route.value.params.extra)
      };

      const values = {
        title: params.title.value,
        sinopsis: params.sinopsis.value,
        channel: params.extra.value[0].channel,
        first_air_date: params.extra.value[0].first_air_date.replace('First air date' , ''),
        last_air_date: params.extra.value[0].last_air_date.replace('Última transmisión' , ''),
        creator_member: params.extra.value[0].cast_members,
        members_list: params.extra.value[0].cast_members,
        season_list: params.extra.value[0].season_list
      };

      const total_seasons = value(values.season_list);
      const season_list = value(values.season_list);
      const season_selected = value(null);
      const episode_selected = value(null);
      const id = value(null)
      const option = value("");


      watch(() =>
        episode_selected.value , (value) =>{
          episode_selected.value = value;
          const eps = episode_selected.value;
          const id = `${params.id.value.replace('ver-' , '')}-${eps}`
          store.value.dispatch("GET_VIDEO_SERIES" , id)
        }
      );


      return{
        ...state,
        ...values,

        option,
        season_selected: season_selected.value,
        episode_selected: episode_selected.value,
        season_list: season_list.value,
        total_seasons: total_seasons.value.length
      }
    }
  }
</script>

我有解决方案，但是有错误 就是每当我选择一个季节时，episodList中的内容都会使我前进；如果再次选择相同的季节，它将使我前进。当我选择剧集时，我很快就能看到这一点，它向我显示了我选择的季节列表，而不仅仅是一个。

我想找到一种不使用EpisodesList进行推送的方法

模板选择

<select class = "container" v-model = "episode_selected">
  <option disabled value = ""> Episodes </option>
  <option v-for = "(epis, index) in episodesList [season_selected - 1]": value = "epis": key = "index">
   {{epis}}
   </option>
</select>

Sscript Seccion


const episodesList = value ([])

watch (() =>
  season_selected.value, (value) => {
  season_selected.value = value
  const selected = season_selected.value; // season selected
  episodesList.value.push (season_list [selected - 1] .episodes); // list of episodes
 }
);

最终解决方案 通过将值1加到变量const season_selected = value(1);来解决问题。然后，将使用手表来知道其值已更新。

设置值1将让我开始视频部分并选择第1季。但随后用户可以在选择中进行更改。

无法读取数组[vuejs]

0 个答案: