タイトルの通り、Vue.jsを学習中で以下の点で詰まってしまっているので、
解決方法教えていただきたいです。
vue
1以下だと問題なく表示される 2<template> 3 <div class="works"> 4 <div class="message">{{ message }}</div> 5 </div> 6</template> 7 8<script> 9export default { 10 name: 'Works', 11 data () { 12 return { 13 message: 'Works' 14 } 15 } 16} 17</script>
以下サンプルコードをそのままコピペで入力する。
https://qiita.com/Wave7KN/items/5a18c9a6ed7d6fac940f
vue
1表示されなくなる 2<template> 3<div class="works"> 4 <div id="vue-carousel" class="vue-carousel"> 5 6 <!-- スライドする部分。keyを持たせることで、それぞれが個別の要素であることを示す。 --> 7 <transition :name="transition_name"> 8 <div class="vue-carousel_body" 9 :key="index" 10 v-for="(content, index) in contents" 11 v-if="visible_content == index" 12 :style="{backgroundColor: content.bg_color}"> 13 {{ content.title }} 14 </div> 15 </transition> 16 17 <!-- 「PREV」「NEXT」と現在地のドット --> 18 <div class="vue-carousel_footer"> 19 <button @click="back()" :disabled="visible_content == 0">PREV</button> 20 <div class="vue-carousel_footer_dot" 21 v-for="(contents, index) in contents" 22 :class="{'is-visible' : visible_content == index}"></div> 23 <button @click="next()" :disabled="visible_content == contents.length - 1">NEXT</button> 24 </div> 25 26 </div> 27</div> 28</template> 29 30<script> 31new Vue({ 32 el: '#vue-carousel', 33 data: { 34 contents: [{ 35 // 青の中身 36 title: 'Content 1', 37 bg_color: '#7bbff9', 38 },{ 39 // 赤の中身 40 title: 'Content 2', 41 bg_color: '#f16972', 42 },{ 43 // 緑の中身 44 title: 'Content 3', 45 bg_color: '#20d2a3', 46 }], 47 transition_name: 'show-next', 48 visible_content: 0, 49 }, 50 methods: { 51 back(){ 52 this.transition_name = 'show-prev'; 53 this.visible_content--; 54 }, 55 next(){ 56 this.transition_name = 'show-next'; 57 this.visible_content++; 58 }, 59 }, 60}) 61</script>
どんな原因が考えられるでしょうか・・・?
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー