鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 用v-for新增空白行，之后就刷新了頁面，為什么會(huì)這樣？

用v-for新增空白行，之后就刷新了頁面，為什么會(huì)這樣？

這兩天才學(xué)的vue，遇到了這樣一個(gè)問題。表格用v-for新增空白行，點(diǎn)擊按鈕之后，頁面好像刷新了。。

<div v-show = "showList">
.....省略代碼
<div v-show="!add">省略代碼</div>
<div v-show="add">
                <div class="form-group">
                <div class="col-md-12 column">
                    <button class="btn btn-xs " @click="addRows"><i class="fa fa-plus"></i>新增行</button>
                    <table id="entry_add"  class="table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th style="display: none">ID</th>
                                <th>商品</th>
                                <th>數(shù)量</th>
                                <th>金額</th>
                                <th>單價(jià)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="e in saleOrder.entrys">
                                <td style="display: none"><input type="text" v-model="e.id" name="id" ></td>
                                <td><input type="text" name="goods" list="goodsList" v-model="e.goodsName"></td>
                                <td><input type="text" name="quantity" v-model="e.quantity"></td>
                                <td><input type="text" name="amount"  v-model="e.amount"></td>
                                <td><input type="text" name="price"  v-model="e.price"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
            </div>
var vm = new Vue({
    el:'#rrapp',
    data:{
        showList: true,
        title: null,
        saleOrder: {
            begin:null,
            end:null,
            creater:null,
            entrys:[]
        }
    },
    methods: {
    addRows:function(){
            saleOrder.entrys.push({id:" ",goodsName:" ",quantity:" ",amount:" ",price:" "});
        },
}

一點(diǎn)擊“新增行”就好像又刷新了頁面。。。

回答
編輯回答
哚蕾咪

<button class="btn btn-xs " @click="addRows">新增行</button>
的外面應(yīng)該是有 from 標(biāo)簽的，才會(huì)出現(xiàn)這種情況。

在form內(nèi)使用button又不想頁面跳轉(zhuǎn)的，有兩種寫法：

1. <button type="button">點(diǎn)我</button>
2. <input type="button" value="點(diǎn)我"/>
2017年12月31日 21:14
編輯回答
孤客

button是有個(gè)刷新事件,要想不刷新建議改成input標(biāo)簽,改一下type的屬性值

2017年1月14日 11:07
編輯回答
裸橙

兩個(gè)問題：

1、 在methods中訪問data中的屬性需要加上this。

addRows:function(){
    this.saleOrder.entrys.push({
        id:" ",
        goodsName:" ",
        quantity:" ",
        amount:" ",
        price:" "
    });
},

2、 使用v-for的時(shí)候記得加上key屬性

<tr v-for="e in saleOrder.entrys" :key="e.id">
2017年4月3日 07:45