前提・実現したいこと
いつもお世話になっております。
下記質問1の解決方法についてご教授いただきたいです。
※可能であれば質問2にもご教授いただきたいです。
質問1
Vue.jsで下記機能実装時に1回目は作成されるのですが、2回目以降処理が走っていないのか動的に作成されません。
・機能:テキストボックスに入力された内容を配列に入れて、チェックボックスとボタンを動的に作成する。
実現したいこと:登録ボタン押下時にテキストボックスの内容とチェックボックスと削除ボタンが動的に作成されること
どなたか解決方法のご教授お願い致します。
質問2
「v-for」の認識は下記のようなものだと思っているのですが、認識として合っていますのでしょうか?
公式サイトの「Vue.js」も確認はしたのですが、認識があっているか不安なので質問しました。
・<タグ名 v-for=""></タグ名> ←左記のタグ名の間をループ処理する。
※今回のソースだと「App.vue」の下記「ループ部分」が登録ボタンを押下するたびに処理される。
■ループ部分
<input type="checkbox" id="check" v-model="todolist">
<label for="check">{{todolists}}</label>
<input type="button" v-on:click="deleatebutton" value="削除">
該当のソースコード
Appvue
1<template> 2 <div id="app"> 3 <h1>ToDoManagement</h1> 4 <input type="text" v-model="textinput"> 5 <input type="button" v-on:click="insertbutton" value="登録"> 6 <p><span>{{textinput.length}}</span>文字</p> 7 <div v-for="todolists in todolist" v-bind:key="todolists"> 8 <input type="checkbox" id="check" v-model="todolist"> 9 <label for="check">{{todolists}}</label> 10 <input type="button" v-on:click="deleatebutton" value="削除"> 11 </div> 12 </div> 13</template> 14 15<script> 16export default { 17 data() { 18 return { 19 textinput: '', 20 todolist: [], 21 }; 22 }, 23 methods: { 24 insertbutton() { 25 if (this.textinput === '') return; 26 this.todolist.push(this.textinput); 27 }, 28 }, 29}; 30 31</script> 32 33<style lang="scss"> 34#app { 35 font-family: 'Avenir', Helvetica, Arial, sans-serif; 36 -webkit-font-smoothing: antialiased; 37 -moz-osx-font-smoothing: grayscale; 38 text-align: center; 39 color: #2c3e50; 40} 41#nav { 42 padding: 30px; 43 a { 44 font-weight: bold; 45 color: #2c3e50; 46 &.router-link-exact-active { 47 color: #42b983; 48 } 49 } 50} 51</style> 52
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/08 16:28