Q&A親の連想配列を書き換えたい
vue.jsでメモツールのようなものを作っています。
1.名前を入力し追加をクリックでリストに反映。
2.リストの名前をクリックすると編集可能。
3.エンターで確定するとリストに反映。（裏側では親rootに反映される）
という機能を実装したいのですが、上手くいかず…
jsで一から何かを作るのが初めてなのでアドバイスを頂きたいですm(_ _)m
発生している問題・エラーメッセージ
現在、制作中のものから困っている箇所を抜き出しコードペンに公開しましたのでこちらで実際の動きを見ていただけると幸いです。
「名前を入力」という箇所に適当な文字列を入力するとリストに吐き出されます。
リストに吐き出された文字列をクリックすると編集可能に。エンターで確定なのですが文字が消えてしまいます。。。
https://codepen.io/ebifly/pen/VxVqvG
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="css/style.css"> 8 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 9 <title>vue</title> 10</head> 11 12<body> 13 14 15 <div class="bl_sect"> 16 17 <div id="main"> 18 19 <div class="bl_inputBlock"> 20 <input v-model="newNameText" 21 @keydown.ctrl.enter="addNewName" 22 @keydown.meta.enter="addNewName" 23 placeholder="名前を入力"> 24 <button @click="addNewName">追加</button> 25 </div><!--.bl_inputBlock--> 26 27 <div class="bl_nameBlock_unit"> 28 <name-item 29 class="bl_nameBlock" 30 v-for="(name, index) in names" 31 :id="index" 32 :title="name.title" 33 :img="name.img" 34 @update-name="updateName" 35 @remove="names.splice(index, 1)"></name-item> 36 </div><!--.bl_nameBlock_unit--> 37 38 </div><!--#main--> 39 40 </div><!-- /.bl_sect --> 41 42 43 <script src="js/project.js"></script> 44</body> 45 46</html>
js
1Vue.component('name-item', { 2 template: '\ 3 <div>\ 4 <button v-on:click="$emit(\'remove\')">X</button>\ 5 <input v-if="edit" v-model="newName" v-on:keyup.enter=\'updateName\' v-on:blur=\'updateName\'>\ 6 <span v-else="" v-on:click="editToggle">{{ img }} {{ title }}</span>\ 7 </div>\ 8 ', 9 props: ['title', 'id', 'img'], 10 data: function data() { 11 return { 12 edit: false, 13 newName:'', 14 memos: [] 15 }; 16 }, 17 methods: { 18 editToggle: function () { 19 this.edit = true; 20 }, 21 updateName: function updateName() { 22 this.$emit('update-name', this.id, this.newName) 23 this.edit = false; 24 } 25 } 26 }); 27 28 new Vue({ 29 el: '#main', 30 data: { 31 newNameText: '', 32 nextImg: 1, 33 names: [] 34 }, 35 methods: { 36 addNewName: function () { 37 if (this.newNameText !== '') { 38 if (this.nextImg > 10) { 39 this.nextImg = 1 40 } 41 this.names.push({ 42 img: this.nextImg++, 43 title: this.newNameText 44 }) 45 } 46 this.newNameText = '' 47 }, 48 updateName: function updateName(id, name){ 49 this.names.splice(id, 1, name); 50 } 51 } 52 })
試したこと
編集可能なタスク管理ツールという私がやりたいことに近いツールを制作している方がいたので「updateName」周りのコードはそちら様からお借りしている状態ですm(_ _)m
ただ今のコードではnames[]を丸々消してid:nameを追加している状態なので、names[title:hogehoge;]だけを書き換えたいのですがどう書けばいいのか分からないです。。。
補足情報（FW/ツールのバージョンなど）
this.names.push(this.newNameText)と書き換えてしまえば、名前の書き換えは上手く行くのですが、
現状、names[]の中にimgの出し分けのための要素が入っているのでnames[title:hogehoge;]だけを書き換えたいのです。。。
初vueで複雑なツールを作り始めてしまって基本的なとこも出来てないかもしれないですが、よろしくお願いいたします。m(_ _)m
回答2件
0
names の各要素は↓
json
1{ 2 "title": "string", 3 "img": 1 4}
のはずなのに、更新の際に String 型を突っ込んでるのが原因かと思います。
javascript
1updateName: function updateName() { 2 this.$emit('update-name', this.id, this.newName) 3 this.edit = false; 4}
↑を↓に修正
javascript
1updateName: function updateName() { 2 this.$emit('update-name', this.id, { 3 img: this.img, 4 title: this.newName, 5 }) 6 this.edit = false; 7}
投稿2018/05/18 13:08
総合スコア2161
0
自己解決
親のメゾットの書き方を
js
1updateName: function updateName(id, name){ 2 this.names.splice(id, 1, name); 3 }
上記から以下に変更
js
1updateName: function updateName(id, name){ 2 this.names[id].title = name 3 }
これでtitleの更新が可能になりました。
デモは以下のリンクから
https://codepen.io/ebifly/pen/VxVqvG
投稿2018/05/22 05:27
編集2018/05/22 05:30
総合スコア8
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/22 05:27