テキストは配列なのに要素が配列じゃないのが設計ミスかと思います。
data: {
content: '宿題',
todos: [{
name: "",
text: "",
isEditing: false,
}, /*...*/ ],
},
だとどう作るでしょうか。
Like!
【todoアプリ , Vue.js】余計な要素が反応しないようにしたい。
解決したいこと
Vue.jsを使ってTodoアプリを作成しようとしています。
"追加"ボタンを押すと、id='card'以下の要素が v-for で繰り返される構成です。
”編集”ボタンを押した際に、該当のinput要素の表示を変更させたいです。
ですが、全てのcardのinput要素が開いてしまいます。
v-for で繰り返す際にどうにか固有の値を与えようと模索したのですが、勉強不足で叶いませんでした。
良い方法がございましたらご教示いただけますと幸いです。
発生している問題・エラー
該当するソースコード
<h2>title</h2>
<div id="app">
<div id="card" v-for="(list, i) in todo">
<template v-if="todos.isEditing === false">
<span>{{i}}:{{list}}</span>
<button v-on:click="onEdit(true, i)">編集</button>
<button v-on:click="deleteBtn(i)">削除</button>
</template>
<template v-if="todos.isEditing === true">
<input v-model="todo[i]">
<button v-on:click="offEdit(false, i)">確定</button>
<button v-on:click="deleteBtn(i)">削除</button>
</template>
</div>
<div id="writing_area">
<input v-model="text" ref="focusInput">
<div v-on:click="addBtn">追加</div>
</div>
</div>
例）
new Vue({
el: '#app',
data: {
todo: ['name','age','area','gender'],
text: '',
todos: {
content: '宿題',
isEditing: false,
},
},
methods: {
onEdit(boolean, index) {
this.todos.isEditing = boolean
console.log(this)
console.log(this.todos.isEditing)
console.log(index, this.todo[index])
},
offEdit(boolean) {
this.todos.isEditing = boolean
},
addBtn() {
this.todo.push(this.text)
this.text = ''
this.$refs.focusInput.focus()
},
deleteBtn(index) {
this.todo.splice(index, 1)
},
},
})
0
1Answer
1