javascript - 无法读取数组中未定义的属性“情节”[vuejs]

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>

我有一个解决方案，但它有一个错误 并且是在 episodeList 中，每次我选择一个季节时，它都会让我推动，如果我再次选择相同的季节，它会让我推动。当我选择剧集时，我可以很快看到这一点，它显示了我选择的季节列表，而不仅仅是一个。

我想找到一种不使用 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>

脚本部分

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 季。但随后用户可以在选择中进行更改。

标签： javascriptarraysvue.jsvuejs2