vueのcreatedが機能しません。
経緯
djangoで得たデータをhtmlに表示した後、そのデータをvueに送り処理を行うという流れの
プログラムを書いています。
今回、データをvueのdataに反映させることはできたのですが、その後createdで設定したプログラムが動かず困っています。
エラー
『isAxiosError.js:10 GET https://api.themoviedb.org/3/movie/undefined?api_key=8b69f0f0a440bb756a0214210c6ed6c2&language=ja&page=1&include_adult=false 404』
エラーは単純でページが見つからないとのこと。
URLの「undefined」の部分にデータが入って欲しい。
html
{% for topic in topicData %}
<b-row>
<b-col cols="12" sm="9">
<b-row>
<input type="text" v-model="movie_id" v-init:movie_id="{{topic.movie_id}}">
</b-row>
<h6>[[ movies.title ]]</h6>
</b-col>
<b-row>
{% endfor %}
vue
<script>
app = new Vue({
delimiters: ['[[', ']]'],
el: "#app",
methods: {
getMovies: function (movie_id) {
axios.get(`https://api.themoviedb.org/3/movie/${movie_id}?api_key=8b69f0f0a440bb756a0214210c6ed6c2&language=ja&page=1&include_adult=false`)
.then(response => {
this.movies = response.data
})
}
},
created() {
this.getMovies();
this.getMoviesImage();
},
data: {
movie_id: '',
movies: '',
},
directives: {
init: {
bind: function (el, binding, vnode) {
vnode.context[binding.arg] = binding.value
}
}
}
});
</script>
htmlのinputで初期値を設定してv-modelにバインドさせました。
なのでページを立ち上げたらdataは更新されるのですが、vueの方のcreatedがエラーを起こしているようです。
vueのdataに反映する前にcreatedでの処理が動いてしまっていると考え、mounted、updated、$nextTickなども試したのですがうまくいかず息詰まってしまいました。
詳しい方がお見えになりましたらよろしくお願いします。
至らない点も多々あるかと思いますが、よろしくお願いします。
0
