Q&A
【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> 後から読む人のためにも、具体的な解決手順を記載してください。
前提・実現したいこと
連想配列のオブジェクトを一つずつ表示したいです。 現状、力業でマスタッシェ内に{{配列[counter].キー名}}として メソッドでcounterを0から一つずつ増やすことで動作はします。 ただ、ちょっと強引で拡張性に乏しい気がします。 何か他の書き方、メソッドはないでしょうか？コード量は気にしてません。
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Vue.js</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <button @click="onClick">ボタン</button> 12 {{counter}} 13 {{items[counter].name}} 14 <!-- ボタンクリックで『0 リンゴ』 から 『1 ミカン』に表示が変わる --> 15 </div> 16 17 <script> 18 new Vue({ 19 el: '#app', 20 data: { 21 counter: 0, //このデータ設置がちょっと強引。出来れば連想配列のindexを利用したい。 22 items: [ 23 { name: 'リンゴ'}, 24 { name: 'ミカン'}, 25 { name: 'ブドウ'}, 26 ], 27 }, 28 29 methods: { 30 onClick: function() { 31 this.counter++ 32 }, 33 }, 34 }); 35 36 </script> 37 <script src="/js/script.js"></script> 38 </body> 39</html>
回答2件
0
dataにcounterでなく、nameを持っておいて、
data: { counter: 0, }
↓を
data: { name: "リンゴ", <= 最初はdefault値として入れておく }
そのnameを表示するようにしといて、
{{items[counter].name}}
↓を
{{name}}
onClick押したタイミングでそのnameから現在どのIndexか検索して、
name = items[Index + 1].nameで反映ぐらいしか思いつきませんでした。
期待する回答と違いますよね、、、
投稿2020/10/21 13:56
総合スコア334
0
自己解決
回答ありがとうございました。
質問自体が曖昧でした。反省。
投稿2020/10/25 02:52
総合スコア6
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。