鍍金池/ 問(wèn)答/HTML/ vue獲取數(shù)據(jù)，頁(yè)面卻什么都沒(méi)有，在線等待

vue獲取數(shù)據(jù)，頁(yè)面卻什么都沒(méi)有，在線等待

HTML代碼

<span id="corps" class="corps box">
    <font>請(qǐng)選擇總隊(duì)</font>
    <ul v-for="item in items">
        <li v-html="item.fcName"></li>
    </ul>
</span>

JS代碼

dataList = new Vue({
    el: '#corps',
    data:{items: list}
});

list有值

回答
編輯回答
絯孑氣

應(yīng)該是都可以的，還有這么一種方法：

dataList = new Vue({
    el: '#corps',
    data() {
        return {
            items: list
        }
    }
});

我像你那樣寫沒(méi)問(wèn)題呀，你看看這個(gè)，你是怎么玩兒的，是這樣嘛？：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <span id="corps" class="corps box">
        <font>請(qǐng)選擇總隊(duì)</font>
        <ul v-for="item in items">
            <li v-html="item.fcName"></li>
        </ul>
    </span>
    <script>
        var list = [{
            fcName: "0"
        }, {
            fcName: "1"
        }];
        var dataList = new Vue({
            el: '#corps',
            data: {
                items: list
            }
        });
    </script>
</body>

</html>
2017年10月16日 00:22
編輯回答
絯孑氣

建議檢查下list的結(jié)構(gòu)把

2017年6月7日 08:01
編輯回答
孤毒

貼一下你的list結(jié)構(gòu)，以及并不是非要用return的，官方說(shuō)的是創(chuàng)建組件的時(shí)候最好用return,避免組件間數(shù)據(jù)之間的相互影響，定義vue實(shí)例兩種都可以

按照你貼的數(shù)據(jù)格式用下面方法來(lái)渲染，沒(méi)發(fā)現(xiàn)問(wèn)題，同時(shí)將items數(shù)據(jù)提出來(lái)封裝成list變量再引入，也沒(méi)有問(wèn)題你參考一下。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>test</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <span id="corps" class="corps box">
        <font>請(qǐng)選擇總隊(duì)</font>
        <ul v-for="item in items">
            <li v-html="item.fcName"></li>
        </ul>
    </span>
<script>
var vm = new Vue({
  el:'#corps', 
  data(){
    return{
      items:[
        {fcTypeId: "1", fcParentId: "0", fcId: "424", fcName: "甘肅消防總隊(duì)", fcCode: "甘消001"},
        {fcTypeId: "1", fcParentId: "0", fcId: "425", fcName: "寧夏消防總隊(duì)", fcCode: "寧消001"},
        {fcTypeId: "2", fcParentId: "424", fcId: "3231", fcName: "蘭州消防2支隊(duì)", fcCode: "蘭消077"}
      ]
    }
  },
});
</script>
</body>  
</html>
2017年2月22日 11:29