iT邦幫忙

1

Vue.js 新手問題

新手想要學習前端框架,目前選擇vue
照著做todo list,想要添加一個Tag功能
現在想法是先用兩個input,一個是事項內容一個是Tag的新增
點選tag區塊再添加事項內容去新增代辦事項
原本我的寫法是先在data創建一個obj物件在更改內容加進陣列中,但是只要添加第二次後陣列中的所有內容都會一樣
後來有成功做出來了,但還是想知道為甚麼

//不成功
 data: {
                title: '代辦事項',
                count: 1,
                Tags: [], //tag arr
                items: [], //item arr
                obj: {
                     id: '',
                     content: '',
                     status: '',
                     Tag: '',
                },
                newItem: '',
                newTag: '',
            }, methods: {
                insertItem: function () {
                    this.obj.id=this.count++;
                    this.obj.content=this.newItem;
                    this.obj.status=false;
                    this.items.push(obj)
                    console.log(this.items)
                    this.newItem='';
                },
                insertTag: function () {
                    this.Tags.push({
                        tag: this.newTag,
                    })
                    console.log('insertTag:'+this.newTag)
                },
                getTag: function (tagName) {
                    this.obj.tag=tagName;
                    console.log('getTag:'+tagName);
                    // console.log(this.obj);
                },
            }
<div id="todo">
        {{title}}
        <div>
            <!--新增內容區塊-->
            <label for="newItem">新事項:</label>
            <input type="text" v-model="newItem">
            <button class="btn btn-info" v-on:click="insertItem">new Item</button>

            <hr>
            <!--新增Tag-->
            <label for="newTag">new Tag:</label>
            <input type="text" v-model="newTag">
            <button class="btn btn-info" v-on:click="insertTag">Tag</button>
            <!--Tag區塊-->
            <ul v-if="Tags.length>0"> 
                <li v-for="(tag,index) in Tags">
                    <a href="#" v-on:click="getTag(tag.tag)">{{tag.tag}}</a>
                </li>
            </ul>

        </div>

        <hr>
  <!--顯示新增完事項-->
        <div>
            <ul v-if="items.length>0">
                <li v-for="(item , index) in items" >
                    <span v-text='item'></span>
                    <button class="btn btn-info" v- on:click="complete(index)">complete</button>
                </li>
            </ul>
        </div>
    </div>
//成功正常用作
 let todo = new Vue({
            el: '#todo',
            data: {
                title: '代辦事項',
                count: 1,
                Tags: [], // tag arr
                items: [], // item arr
                Tag:'', // 當下tag
                // obj: {
                //     id: '',
                //     content: '',
                //     status: '',
                //     Tag: '',
                // },
                newItem: '',
                newTag: '',
            }, methods: {
                insertItem: function () {
                    obj = {
                        id: this.count++,
                        content: this.newItem,
                        status: false,
                        tag:this.Tag,
                    }
                    this.items.push(obj)
                    console.log(this.items)
                    this.newItem='';
                },
                insertTag: function () {
                    this.Tags.push({
                        tag: this.newTag,
                    })
                    console.log('insertTag:'+this.newTag)
                },
                getTag: function (tagName) {
                    this.Tag=tagName;
                    console.log('getTag:'+tagName);
                
                },
            }
        })

2 個回答

2
dragonH
iT邦超人 6 級 ‧ 2019-10-30 00:08:13
最佳解答

data 不是應該是長這樣嗎

data() {
    return {
        
    };
}

然後你打開 browser 的 console

估計會有很多錯誤

然後你是想問這種東西

froce大 在這上面這篇說得很清楚了

就不贅述了

根據以上的

所以你要寫成

const obj = {
    id: this.count++,
    content: this.newItem,
    status: false,
    tag:this.Tag,
};

也就是你後來改的那樣

codepen

froce iT邦大師 2 級 ‧ 2019-10-30 08:18:06 檢舉

component才是啦,他可能直接script引用vue。

dragonH iT邦超人 6 級 ‧ 2019-10-30 09:05:05 檢舉

froce

是耶

不過我 component 或 script 都是習慣這樣寫 XD

j7550155 iT邦新手 5 級 ‧ 2019-10-30 11:10:14 檢舉

謝謝解答,我了解了

1
小魚
iT邦大師 1 級 ‧ 2019-10-30 01:20:08

簡單說你的this.obj是同一個物件,
你後面改變了之後,
之前push的資料也會改變,
其實C#也是有這樣的情況.

但是你用
obj = { }
就是new一個新的物件,
每次的物件都是不一樣的.

j7550155 iT邦新手 5 級 ‧ 2019-10-30 11:11:16 檢舉

謝謝解答,我了解了

我要發表回答

立即登入回答