<button id="8k4gk"></button><cite id="8k4gk"></cite>

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

HTML代碼

<span id="corps" class="corps box">
    <font>請選擇總隊</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
        }
    }
});

我像你那樣寫沒問題呀，你看看這個，你是怎么玩兒的，是這樣嘛？：

<!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>請選擇總隊</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的，官方說的是創(chuàng)建組件的時候最好用return,避免組件間數(shù)據(jù)之間的相互影響，定義vue實例兩種都可以

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

<!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>請選擇總隊</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: "甘肅消防總隊", fcCode: "甘消001"},
        {fcTypeId: "1", fcParentId: "0", fcId: "425", fcName: "寧夏消防總隊", fcCode: "寧消001"},
        {fcTypeId: "2", fcParentId: "424", fcId: "3231", fcName: "蘭州消防2支隊", fcCode: "蘭消077"}
      ]
    }
  },
});
</script>
</body>  
</html>

2017年2月22日 11:29